javascript - 更改值时未触发 $watch

Question

我对何时在 Angularjs 中使用 $apply 有点困惑，我的困惑来自以下示例。

这是我的设计:

1) 我制作了一个自定义指令“profile-modal”，它具有“visible”属性，“visible”属性存储一个“profileShow”变量，它决定是否显示弹出框

2) 在指令中，我以两种方式绑定(bind)可见属性，因为外部范围 Controller 将修改“profileShow”变量，同时指令将修改“可见”属性以显示/隐藏框

3) 当用户点击指定按钮时， Controller 将修改“profileShow”变量，弹出框

4) 当用户关闭引导框时，on hidden 函数将改变属性“visible”，触发 $watch in 指令关闭对话框。

这是代码

<profile-modal visible="profileShow"></profile-modal>
<button type="button" class="btn btn-primary btn-sm" ng-click="addConfProfile()">
   <span class="glyphicon glyphicon-plus"></span> Add Profile
</button>

    define(['testConfig','bootstrap-dialog'],function(testConfig, BootstrapDialog){
    testConfig
        .controller('apConfCtrl', function($scope){
            $scope.profileShow = false;
            $scope.addConfProfile = function(){
                $scope.profileShow = !$scope.profileShow;
            };
        })
        .directive('profileModal',function(){
            return {
                restrict: 'E',
                templateUrl: 'templates/profile_add_dialog.html',
                replace: true,//replace the original profile modal dom
                scope:{
                    visible: '=',
                },
                link: function(scope, elm, attr){
                    //set modal title
                    scope.profileTitle = "Add Profile";
                    scope.$watch('visible', function(n,o){
                        console.log(n);
                        console.log(o);
                        if (n){
                            $(elm).modal('show');
                        }
                        else{
                            $(elm).modal('hide');
                        }
                    });

                    $(elm).on('hidden.bs.modal', function(){
                        scope.visible = false;
                        scope.$apply(); // >>Why this is necessary??
                        //console.log(scope.visible);
                    });

                }
            };
        });
});

但是在实现时，我遇到了以下问题，第一次单击按钮时，一切都按预期进行，弹出框，然后关闭框。在我第二次尝试打开框时，没有弹出任何内容...然后我尝试再次单击，它再次弹出。

然后我发现主要问题是隐藏操作不会触发 $watch 函数来更改属性“可见”，但令人惊奇的部分是当我尝试添加范围时。更改属性变量后 $apply ， 有用!我只是想知道为什么我必须这样做，Angularjs 是否应该在不调用 $apply 的情况下帮助监视变量“可见”？

感谢任何帮助

Answer 1

Angular 依靠一种称为“摘要循环”的东西来获取任何更改。触发摘要循环的是调用 $scope.$digest() 或 $scope.$apply()。

对于大多数内置的 Angular 指令，它们已经为您触发了摘要循环。例如，如果监视的表达式发生变化，就会执行监视监听器函数，当检测到更改时，它会在摘要循环期间执行。

但是，对于任何不属于 Angular 的部分，例如发生的 jQuery 事件，您需要将其“告诉”Angular。这意味着您自己调用 $scope.$apply()。