Javascript 与rootScope交互的指令在Angular JS中不工作

我正在尝试与

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

变量时，它显示我使用

isVisible:true

更新了

$root

，但是，我的模式没有出现。如果我更改

范围，$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>

但是，结果是一样的。
您没有做错什么，只是缺少一行代码。在本声明中：

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供你测试
 为什么需要在rootScope上执行此操作？如果我将
scope.$root.confirmModal.isVisible
更改为
scope.isVisible
，将
root.confirmModal.isVisible
更改为
isVisible
，则使用
scope.isVisible=false初始化它不会在单击时显示。如果在单击功能后查看
范围
，它将被设置为
isVisible:true
。我做错了什么？
element.on('click', function() {
  scope.$apply(function(){ // or $timeout(function() {
    scope.isVisible = true;
    console.log(scope);
    console.log('open modal');
  });

});