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

Directive interacting with rootScope not working in Angular JS

本文关键字：Angular JS 不起作用 指令 rootScope 交互      更新时间：2023-09-26

>我正在尝试与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更新，但是，我的模态没有出现。如果我将scope.$root.confirmModal.isVisible = true;更改为$rootScope.confirmModal.isVisible = true;得到相同的结果，则控制台.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>

然而，相同的结果。

你没有做错什么，你只是缺少一行代码。在此声明中：

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，以便您能够进行测试。

相关文章：