각도 지시문 - 또 다른 지시어가 격리 된 범위 인 경우 부모 범위 업데이트

Question

부모 범위를 업데이트해야하는 각도 지시문을 작성했습니다.

angular.module('app').directive('googlePlace', function() { 
    return { 
     restrict: 'A', 
     require: 'ngModel', 
     link: function ($scope, element, attributes, model) { 

       $scope.property1 = 'some val'; 
       $scope.property2 = 'another val'; 
       $scope.$apply(); 

    }; 
}); 

하지만 내 컨트롤러에서 나는이 작업을 수행 :

MyCtrl = function($scope){ 
$scope.doSave = function(){ 
    // do some logic 
    console.log($scope.property1); 
    console.log($scope.property2); 


} 

}

doSave 실행, 내가 내 콘솔에서 정의되지 않은 값을 얻고있다. 범위를 분리하지 않고 어떻게 부모 범위에 적용 할 수 있습니까? 동일한 요소의 다른 지시문이 범위를 분리하기 때문에이 옵션이 없습니다.

Answer 1

이 작동합니다. 기본적으로 지시문에 범위를 지정하지 않으면 부모 범위가 사용되므로 property1과 property2를 설정해야합니다. 지시문의 범위를 false로 설정하십시오. 참고로 당신이하는 일은 좋은 습관이 아닙니다. 범위를 분리하고 속성을 속성으로 추가하는 것이 좋습니다. 이렇게하면 좋은 캡슐화가됩니다.

예를

angular.module('app').directive('googlePlace', function() { 
    return { 
     restrict: 'A', 
     require: 'ngModel', 
     scope: { 
      property1: '=', 
      property2: '=' 
     } 
     link: function ($scope, element, attributes, model) { 

      //here you have access to property 1 and 2 

    }; 
}); 

function MyCtrl($scope) { 
    $scope.property1 = null; 
    $scope.property2 = null; 

    $scope.doSave = function(){ 
    // do some logic 
     console.log($scope.property1); 
     console.log($scope.property2); 
    } 
} 

에 대한

그리고 당신의 HTML

<div ng-control="MyCtrl"> 
<div google-place property1='property1' property2='property2'></div> 
</div> 

Answer 2

가 작동하는 것 같다 때문에, 당신은 잘못하고있는 것을 모른다는 : http://jsfiddle.net/HB7LU/2865/

var myApp = angular.module('myApp',[]); 
angular.module('myApp').directive('googlePlace', function() { 
    return { 
     restrict: 'A', 
     require: 'ngModel', 
     link: function ($scope, element, attributes, model) { 

       $scope.property1 = 'some val'; 
       $scope.property2 = 'another val'; 
       $scope.$apply(); 

    } 
} 
}); 

    angular.module('myApp').controller('MyCtrl', MyCtrl); 
//myApp.directive('myDirective', function() {}); 
//myApp.factory('myService', function() {}); 

function MyCtrl($scope) { 
    $scope.doSave = function(){ 
    // do some logic 
    console.log($scope.property1); 
    console.log($scope.property2); 


} 
}