从外部角度调用范围函数不会触发手表答案

【问题标题】：Calling scope function from outside angular does not trigger watch从外部角度调用范围函数不会触发手表
【发布时间】：2015-03-04 16:35:30
【问题描述】：

简单示例：

  <body ng-app="testApp">
    <form name="myForm" id='CtrlHost' ng-controller="Ctrl">
        <input type="Button" value="Change Inside Angular" ng-click="ChangeIt()" />
        <input type="Button" value="Change Outside Angular" onclick="OutsideAngularChange()" />
      </form>
  </body>

angular.module('testApp', [])
    .controller('Ctrl', function($scope, MyService) {
        var NewPropValue = 1;
        $scope.ChangeIt = function () {
            alert("scope.changeit called");
              NewPropValue++;
              MyService.SetMyProp(NewPropValue);
        };
        $scope.$watch(MyService.GetMyProp, function (newValue) {
            alert("NewValue from Watch = " + newValue);   
        });
    }).service('MyService', function () {
       var myProp;

        this.GetMyProp = function () {
            return MyProp;
        };

        this.SetMyProp = function (newProp) {
            MyProp = newProp;   
        };
    });

function OutsideAngularChange() {
                  alert("OutsideAngularChange called")
    angular.element(document.getElementById('CtrlHost')).scope().ChangeIt();
}

http://jsfiddle.net/jonnyknowsbest/4umxanpu/

点击“Change Inside Angular”按钮，触发范围监视。点击“更改外部角度”按钮，不会触发范围监视。

两个按钮调用相同的作用域方法来更新服务属性。

为什么一个有效而一个无效？

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

更改值后尝试使用 $scope.$apply()。

https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$apply

【讨论】：

作用域值发生变化时有没有办法反其道而行触发外部函数？
这是$scope.$watch('var', callback)

【解决方案2】：

您回答了自己的问题。 $watches 只在 $digest() 内部被调用。这是“内角”的定义。由于您的调用是在 $digest() 或“外部角度”之外进行的，因此不会评估任何观察者。

您可以通过多种方式手动触发摘要，但是

angular.element(document.getElementById('CtrlHost')).scope().ChangeIt();

angular.element(document.getElementById('CtrlHost')).scope().$apply();

这里可能是最合适的。

【讨论】：