我是新与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>
是否有原因?我在做什么错,或者我在这里听不懂?