[英]Directive interacting with rootScope not working in 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
变量时,它显示为$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>
但是结果相同。
您没有做错什么,只是缺少了一行代码。 在此声明中:
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,以便您进行测试。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.