我正在尝试与 交互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;
我得到相同的结果,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
不能与指令中的 in 进行交互吗?
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>
然而结果相同。