Javascript AngularJS-变量必须作为对象属性放置到被触发的$watch

我是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>

{{myvar}}
var app=angular.module（“myapp”，[]）
.controller（“ctrl1”，函数（$scope，$rootScope）{
$scope.myvar=1；
$scope.vars=[1,2,3]；
$scope.$watch（“myvar”，function（））{
console.log（“ctrl1 myvar已更改”）；
});
})
.controller（“ctrl2”，函数（$scope，$rootScope）{
$scope.$watch（“myvar”，function（））{
console.log（“ctrl2 myvar已更改”）；
});
})
.run（）；

更改选择值时，不会触发ctrl1中的$watch。但如果我在$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>

{{settings.myvar}}
var app=angular.module（“myapp”，[]）
.controller（“ctrl1”，函数（$scope，$rootScope）{
$scope.settings={
myvar:1
};
$scope.vars=[1,2,3]；
$scope.$watch（“settings.myvar”，function（））{
console.log（“ctrl1 myvar已更改”）；
});
})
.controller（“ctrl2”，函数（$scope，$rootScope）{
$scope.$watch（“settings.myvar”，function（））{
console.log（“ctrl2 myvar已更改”）；
});
})
.run（）；

---

这有什么原因吗？我做错了什么，或者我不明白什么？

这对我来说非常有效，我需要更多的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>

.controller（'MyCtrl2'，['$scope'，函数（$scope）{
$scope.myvar=1；
$scope.vars=[1,2,3]；
$scope.$watch（'myvar'，函数（v）{
警戒（五）；
})
}]);

基本上，您需要在父范围中使用对象，而不是原语，然后才能在子范围中进行更新。因此，为什么第二个实现有效，而不是第一个

如果您使用原语，它将在子范围内复制它，因此在子控制器中触发更改时，将永远不会触发父控制器中的watch语句。这表明了这种行为-看一看

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>

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();