1

简而言之：

我尝试在我的指令中做这样的事情 - 即将模型的值更改为“触发”属性：

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;
};

它有效。

但是，如果触发器的值更改为false/null我想关闭它 - 例如单击取消按钮，或单击 X 图标。如果发生这两个操作之一，我需要将触发器值设置回false/null，以便下次用户单击“删除”按钮的值会从 false -> true 更改，并且我的对话框再次出现。

问题是这段代码不起作用：

            angular.element(element).on('hidden.bs.modal', function () {
                scope.$apply(function () {
                    attrs.$set('trigger', null);
                });
            });

我的意思是它不会将范围内的{{showRemoveDialog}}的值设置为 null。我已经尝试过 $apply 功能，但仍然处于等待状态。

我想我在角度上做错了什么。请帮忙。

4

2 回答 2

3

是的，您提出的想法有点令人困惑，更改属性实际上不会更改范围变量，因此要解决此问题，您必须更改范围变量，在这种情况下您知道变量名称是什么所以它会起作用，但对于其他元素，您可能不知道变量是什么。要解决此特定问题，您必须这样做。

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)，因为传递给链接函数的元素应该已经被包装。

于 2013-09-20T12:38:09.583 回答
0

jQuery on() 方法的第一个参数是您正在监听的事件。我以前从未见过它与自定义事件一起使用，只有标准的 Javascript 事件，如“keydown”。所以我的第一个问题是你测试过事件钩子是否被调用过？如果不放一个 console.log("event called"); 在您尝试设置元素的触发属性之前。

我要提到的另一件事是，像这样将属性设置为 null 是行不通的。看看 AngularJS 源代码。相反，我会将属性设置为 false。

最后，我建议只使用Angular UI Bootstrap 库，它包含一个很好的模式特性——或者其他的东西，我不介意，但在这里重新发明轮子似乎没有必要。

于 2013-09-20T12:41:34.057 回答