Question

简而言之：

我尝试在我的指令中做这样的事情 - 即改变喜欢'触发'属性的模型的值：

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

}）;

如您所见，我观察触发器属性，当它变为 true （用户点击删除按钮）时，我会显示对话框：

$scope.remove = function () {
    $scope.showRemoveDialog = true;
};

它有效。

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

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

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

我的意思是它没有将范围中 {{showRemoveDialog}} 的值设置为null。我已经尝试了$ apply函数，但仍然是徒劳的。

我想我在角度方面做了一些非常错误的事情。请帮忙。

Answer 1

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

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

Answer 2

jQuery on（）方法的第一个参数是您正在侦听的事件。我以前从未见过它与自定义事件一起使用，只有像“keydown”这样的标准Javascript。所以我的第一个问题是你是否测试了事件挂钩被调用？如果没有放一个console.log（“事件叫”）;在尝试设置元素的触发器属性之前。

我要提到的另一件事是将属性设置为null，就像那样无法工作。 Have a look at the AngularJS source code。相反，我会将属性设置为false。

最后我建议只使用包含一个很好的模态功能的the Angular UI Bootstrap library - 或其他什么，我不介意，但重新发明轮子似乎没必要。

更新指令内的attrs值 - 如何在AngularJS中执行

简而言之：

这是全文：

2 个答案: