更新内部指令ATTRS价值 - 如何做到这一点的AngularJS [英] Updating attrs value inside directive - how to do it in AngularJS

问题描述

我尝试做这样的事情我里面的指令 - 即更改为喜欢触发属性模型的值：

I try to do something like this inside my directive - namely change the value of model that is liked to 'trigger' attribute:

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

和它不工作。为什么？我应该做它周围的其他方式？

and it does not work. Why? Should I do it other way around?

我在 showRemoveDialog 标志设置所​​触发的对话框。当用户点击此标志设置删除按钮。

I have a dialog that is triggered when showRemoveDialog flag is set. This flag is set when user clicks Remove button.

下面是对话的开始标记：

Here is a dialog's opening tag:

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

}）;

正如你所看到的，我观察到的触发属性，当它改变为真正（用户点击删除按钮），我显示对话框

As you can see, I observe trigger attribute and when it changes to true (user clicks Remove button), I show the dialog:

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

和它的作品。

但如果触发更改值假/空我要关闭它 - 比如取消按钮被点击，或者被点击X图标。如果出现这两种行为之一的，我需要触发值重新设置为假/空，所以，下一次，当用户点击删除按钮值将从改变假的 - >真的，我的对话框再次出现

But if the value of trigger changes to false/null I want to close it - for instance Cancel button was clicked, or X icon was clicked. And if one of these two actions occur, I need to set back trigger value to false/null, so that the next time when user click on Remove button value would change from false -> true, and my dialog appears once again.

问题是，这块code不工作：

The problem is that this piece of code does not work:

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

我的意思是没有设置的 {{showRemoveDialog}} 的范围为空值。我已经尝试过$应用功能，但仍处于韦恩。

I mean it does not set the value of {{showRemoveDialog}} in scope to null. I already tried $apply function, but still in wain.

我想我做的事情真的错了的角度。请帮助。

I guess I'm doing something really wrong in angular. Please help.

推荐答案

是的，你拿出的想法是怎么样的困惑，改变属性不会实际改变的范围变量，所以要解决这个问题，你就必须改变的范围变量，在这种情况下，你知道的变量名是什么，所以它会工作，但对于其他元素，你可能不知道的变量是什么。要解决这个具体问题，你必须做的。

Yes, the idea you have come up with is kind of confusing, changing the attribute will not actually change the scope variable, so to fix this you would have to change the scope variable, in this case you know what the variables name is so it would work, but for other elements you might not know what the variable is. To fix this specific issue you would have to do.

scope.showRemoveDialog = null;
scope.$apply();

这是不是非常有活力，但。这里是我会做什么（未测试）。

This is not very dynamic though. Here is what I would do (not tested).

传递变量名作为的字符串的

trigger="showRemoveDialog"   

然后在你的指令获得 $解析

myApp.directive("removeDialog", function ( $parse ) { ....    

链接功能...

The link function...

 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（元素）作为传递给链接功能元素应该已经被包装。

Also you don't need to do angular.element(element) as the element passed to the link function should already be wrapped.

这篇关于更新内部指令ATTRS价值 - 如何做到这一点的AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！