简而言之:
我尝试在我的指令中做这样的事情——即将喜欢的模型的值更改为“触发”属性:
angular.element(element).on('hidden.bs.modal', function () {
scope.$apply(function () {
attrs.$set('trigger', null);
});
});
它不起作用。为什么?我应该换一种方式吗?
这是完整的故事:
我有一个对话框,它在设置 showRemoveDialog 标志时触发。当用户点击删除按钮时设置此标志。
这是一个对话框的开始标签:
<div remove-dialog trigger="{{showRemoveDialog}}" class="modal fade" id="myModal">
然后我有一个指令removeDialog:
myApp.directive("removeDialog", function () {
return {
restrict: 'A',
link: function (scope, element, attrs, controller) {
angular.element(element).on('hidden.bs.modal', function () {
scope.$apply(function () {
attrs.$set('trigger', null);
});
});
attrs.$observe('trigger', function (newValue) {
if (newValue) {
angular.element(element).modal('show');
} else {
angular.element(element).modal('hide');
}
});
},
controller: 'DeleteController'
};
});
如您所见,我观察到 trigger 属性,当它变为 true(用户点击 Remove 按钮)时,我显示对话框:
$scope.remove = function () {
$scope.showRemoveDialog = true;
};
而且有效。
但如果 trigger 的值更改为 false/null 我想关闭它 - 例如单击取消按钮,或单击 X 图标。如果这两个操作之一发生,我需要将触发值设置回 false/null,以便下次用户点击 Remove 按钮时,值将从false -> true,我的对话框再次出现。
问题是这段代码不起作用:
angular.element(element).on('hidden.bs.modal', function () {
scope.$apply(function () {
attrs.$set('trigger', null);
});
});
我的意思是它不会将范围内的 {{showRemoveDialog}} 的值设置为 null。我已经尝试了 $apply 函数,但仍然失败。
我想我在 Angular 上做错了。请帮忙。
最佳答案
是的,您提出的想法有点令人困惑,更改属性实际上不会更改范围变量,因此要解决此问题,您必须更改范围变量,在这种情况下,您知道变量名称这样它就可以工作,但是对于其他元素,您可能不知道变量是什么。要解决此特定问题,您必须这样做。
scope.showRemoveDialog = null;
scope.$apply();
虽然这不是很动态。这是我会做的(未经测试)。
将变量名作为字符串
传递trigger="showRemoveDialog"
然后在你的指令中从 $parse
获得一些帮助
myApp.directive("removeDialog", function ( $parse ) { ....
链接函数...
link: function (scope, element, attrs, controller) {
var variableName = attrs.trigger;
angular.element(element).on('hidden.bs.modal', function () {
$parse(variableName + ' = null')(scope);
scope.$apply(); // Might not be needed.
});
scope.$watch(variableName, function (newValue) {
if (newValue) {
angular.element(element).modal('show');
} else {
angular.element(element).modal('hide');
}
}, true); // true might not be needed.
},
此外,您不需要执行 angular.element(element)
,因为传递给链接函数的元素应该已经被包装。
关于javascript - 更新指令内的 attrs 值 - 如何在 AngularJS 中执行此操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18916891/