$ value在更改值時未觸發

Question

關於何時在Angularjs中使用$ apply我有點困惑，我的困惑來自下面的例子。

這是我的設計：

1）我制作一個自定義指令“profile-modal”，其屬性為“visible”，“visible”屬性存儲“profileShow”變量，該變量決定是否顯示彈出框

2）在指令中，我雙向綁定可見的attrible，因為外部作用域控制器將修改“profileShow”變量，同時指令將修改“visible”屬性以顯示/隱藏框

3）當用戶點擊指定按鈕時，控制器將修改“profileShow”vaiable，彈出框

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

                }
            };
        });
});

但實施后，我面臨以下問題，第一次點擊按鈕，一切按預期工作，彈出框，然后關閉框。 在第二次我嘗試打開盒子，沒有任何彈出窗口......然后我再次嘗試點擊，再次彈出窗口。

然后我找出主要的問題是on on hidden動作不會觸發$ watch函數來改變屬性“visible”，但令人驚訝的部分是當我嘗試添加范圍時。$ apply更改屬性變量后，它的工作原理！ 我只是想知道為什么我必須這樣做，Angularjs是否想要幫助監視變量“visible”而不調用$ apply？

感謝任何幫助

Answer 1

Angular依賴於稱為“摘要周期”的東西來獲取任何變化。 觸發摘要周期的事情是調用$scope.$digest()或$scope.$apply() 。

對於大多數內置的Angular指令，它們已經為您觸發了摘要周期。 例如，如果觀察到的表達式改變則執行的監視偵聽器功能在檢測到改變的摘要周期期間執行。

但是，對於任何不屬於Angular的東西，例如發生jQuery事件，你需要“告訴”Angular它。 這意味着自己調用$scope.$apply() 。

Answer 2

還建議您在$scope的子對象內定義布爾值，數字或字符串屬性（在您的情況下為'profileShow'），而不是直接使它們成為$scope屬性。 這種方法的原因是bool，數字和字符串按值傳遞，而數組和對象通過引用傳遞。 因此，即使您的屬性發生更改，您也必須手動調用$apply()方法，angular將不會為您調用$digest循環。