我的主要作用域中有一个变量:
scope.trigger
在我的指令中:
angular.module('modal').directive('nsModal', ['nsTools', function (Tools) {
return {
restrict: 'E',
replace: true,
scope:{
trigger: "="
},
templateUrl: 'common/modal.html',
controller: ['$scope', function (scope) {
scope.isShown = false;
scope.$watch(function () {
return scope.trigger;
}, function (n) {
if (n == 'order-button') {
scope.isShown = true;
}
else {
scope.isShown = false;
}
});
scope.clickClose = function ()
{
scope.currentTrigger = "";
}
scope.clickCancel = function ()
{
scope.currentTrigger = "";
scope.isShown = false;
}
scope.clickYes = function ()
{
scope.currentTrigger = "";
scope.isShown = false;
}
}]
}
}]);
我想更改主范围触发器参数,所以我进行了双向绑定。但是有了它,手表就不工作了。监视中的 scope.trigger 始终未定义;
当我删除scope
部分时,手表工作正常,但随后更改未保存在主范围内
.html:在我的索引中: <ns-modal />
和模态代码:
<div ng-show="isShown">
<div >
<div class="modal">
<div class="modalheader>
<p >Message</p>
<button ng-click="clickClose()"></button>
</div>
<div class="modal-body">
<span>Identify customer ?</span>
<div class="modalfooter">
<button id="cancel" ng-click="clickCancel()">No</button>
<button id="save" ng-click="clickYes()">Yes</button>
</div>
</div>
</div>
</div>
这就是全部
在你的 html 中,应该添加触发器属性:
<ns-modal trigger="trigger"/>
请注意,触发器可以是任何变量(但您在主作用域中编写了它称为触发器)。
这是因为当添加此内容时:
scope:{
trigger: "="
},
将为指令创建一个新范围。因此,您应该使用属性指定传递给指令的每个变量;
您应该在可变trigger
上使用监视和深度监视true
。
scope.$watch('trigger', function (n) {
if (n == 'order-button') {
scope.isShown = true;
}
else {
scope.isShown = false;
}
}, true);
更新
正如我在评论中所说,您的html应该有trigger="someVariable"
标记
<ns-modal trigger="someVariable"></ns-modal>
首先,你可能想使用Angular的事件而不是$watch
- 因为它要贵得多。(使用$scope.$broadcast & $scope.$on
)。
其次,如果您还可以指定如何使用该指令 - 这将有助于理解问题。