與rootScope的指令交互在Angular JS中不起作用

Question

我正在嘗試與rootScope交互以使模式出現。 我有一個非常基本的指令，我試圖將rootScope與ng-show配對使用。

這是指令的代碼：

.directive('modal', ['$rootScope', function ($rootScope) {
    return {
        restrict: 'A',
        templateUrl: 'view/templates/modal-confirm.tpl.html',
        link: function (scope, element, attrs) {
            console.log(scope);

            element.on('click', function() {
                scope.$root.confirmModal.isVisible = true;
                console.log('open modal');
            });
        }
    }
}])

當我記錄scope變量時，它顯示為$root已使用isVisible: true更新isVisible: true但是，我的模態沒有出現。 如果我更改scope.$root.confirmModal.isVisible = true; 到$rootScope.confirmModal.isVisible = true; 我得到相同的結果，console.log在工作，但是沒有模式出現。

這是模式模板的代碼：

<!-- Confirm Modal Template -->
<div ng-if="$root.confirmModal.isVisible" class="overlay">
    <div class="overlay-content extended">
        <span>{{ $root.confirmModal.content }}</span>
        <div class="buttons">
            <button ng-click="$root.confirmModal.isVisible = false;" class="btn btn-default half">Cancel</button>
        </div>
    </div>
</div>

是否無法在指令中與$rootScope進行交互？

使用scope而不是$rootScope更新了代碼：

.directive('modal', ['$rootScope', function ($rootScope) {
    return {
        restrict: 'A',
        templateUrl: 'view/templates/modal-confirm.tpl.html',
        link: function (scope, element, attrs) {
            scope.isVisible = false;

            element.on('click', function() {
                scope.isVisible = true;
                console.log(scope);
                console.log('open modal');
            });
        }
    }
}])

<!-- Confirm Modal Template -->
<div ng-if="isVisible" class="overlay">
    <div class="overlay-content extended">
        <span>hello world</span>
    </div>
</div>

但是結果相同。

Answer 1

您沒有做錯什么，只是缺少了一行代碼。 在此聲明中：

element.on('click', function() {
  scope.isVisible = true;
  console.log(scope);
  console.log('open modal');
});

您正在創建一個很好的匿名函數，但是angular不能自動神奇地跟蹤作用域變量所做的更改。您需要做的是在函數結束時顯式地請求摘要循環，或者使用換行$ apply或$ timeout函數中的代碼。 像這樣：

element.on('click', function() {
  scope.$apply(function(){ // or $timeout(function() {
    scope.isVisible = true;
    console.log(scope);
    console.log('open modal');
  });

});

如果您想了解更多有關$ apply的信息，請查看這篇很棒的文章 。 最后，我在這里用您的代碼組裝了一個Plunker，以便您進行測試。