AngularJS - 變量，必須把作爲對象屬性設置爲$觀看觸發

我是新與AngularJS和我嘗試這樣做：

<div ng-controller="ctrl1"> 
    <div ng-controller="ctrl2"> 
     <select ng-model="myvar" ng-options="c for c in vars" ></select> 
     <div>{{myvar}}</div> 
    </div> 
    </div> 

    <script src="js/vendor/angular.min.js"></script>  
    <script type="text/javascript"> 

    var app = angular.module("myapp", []) 
    .controller("ctrl1",function($scope, $rootScope) { 
     $scope.myvar = 1; 
     $scope.vars = [1, 2, 3]; 

     $scope.$watch("myvar", function(){ 
     console.log("ctrl1 myvar changed"); 
     }); 

    }) 
    .controller("ctrl2",function($scope, $rootScope) { 
     $scope.$watch("myvar", function(){ 
     console.log("ctrl2 myvar changed"); 
     }); 
    }) 
    .run(); 

    </script>

當改變選擇的值，在CTRL1 $手錶永遠不會觸發。但是如果我在$ scope中使用一個對象並且觀察它的屬性，它可以工作：

<div ng-controller="ctrl1"> 
    <div ng-controller="ctrl2"> 
     <select ng-model="settings.myvar" ng-options="c for c in vars" ></select> 
     <div>{{settings.myvar}}</div> 
    </div> 
    </div> 

    <script src="js/vendor/angular.min.js"></script>  
    <script type="text/javascript"> 

    var app = angular.module("myapp", []) 
    .controller("ctrl1",function($scope, $rootScope) { 
     $scope.settings = { 
     myvar : 1 
     }; 
     $scope.vars = [1, 2, 3]; 

     $scope.$watch("settings.myvar", function(){ 
     console.log("ctrl1 myvar changed"); 
     }); 

    }) 
    .controller("ctrl2",function($scope, $rootScope) { 
     $scope.$watch("settings.myvar", function(){ 
     console.log("ctrl2 myvar changed"); 
     }); 
    }) 
    .run();   

    </script>

是否有原因？我在做什麼錯，或者我在這裏聽不懂？

來源

2014-05-16 clouchtibat

基本上你需要使用對象，並不是原始，父範圍，然後你就可以在孩子的範圍進行更新。因此，爲什麼你的第二個實施工作，而不是你第一個。

如果使用原語，它將在子作用域內創建它的副本，因此在子控制器中觸發更改時，父控制器中的watch語句永遠不會被觸發。這jsfiddle演示了這種行爲 - 看看。

HTML

<div ng-app="myapp"> 
    <div ng-controller="ctrl1"> 
     <select ng-model="myvar" ng-options="c for c in vars" ></select> 
     <div>{{myvar}}</div> 
    <div ng-controller="ctrl2"> 
     <select ng-model="myvar" ng-options="c for c in vars" ></select> 
     <div>{{myvar}}</div> 
    </div> 
    </div> 
</div>

的Javascript

var app = angular.module("myapp", []) 
.controller("ctrl1",function($scope, $rootScope) { 
    $scope.myvar = 1; 
    $scope.vars = [1, 2, 3]; 
    console.log($scope); 
    $scope.$watch("myvar", function(){ 
    console.log($scope.myvar); 
    console.log("ctrl1 myvar changed"); 
    }); 

}) 
.controller("ctrl2",function($scope, $rootScope) { 
    console.log($scope); 
    console.log($scope.myvar); 
    console.log($scope); 
    $scope.$watch("myvar", function(){ 
    console.log($scope.myvar); 
    console.log($scope.$parent.myvar); 
    console.log("ctrl2 myvar changed"); 
    }); 
}) 
.run();

來源

2014-05-16 14:17:08 GordyD

這對我來說完美的作品我需要更多的html來診斷。

.controller('MyCtrl2', ['$scope',function($scope) { 
     $scope.myvar=1; 
     $scope.vars=[1,2,3]; 
     $scope.$watch('myvar',function(v){ 
      alert(v); 
     }) 
}]); 

<select ng-options="value for value in vars" ng-model="myvar"></select>

來源

2014-05-16 14:04:55

AngularJS - 變量，必須把作爲對象屬性設置爲$觀看觸發

回答

相關問題