Question

我有一部分html就像这样

<div my-custom-security-directive>
  <button ng-if={{some constraints}} ng-click={{logic}}>cancel</button>
  <button ng-disabled={{some logic}} ng-click={{some logic}}>submit<button>
</div>

我的自定义安全指令对按钮进行操作，以通过css显示/隐藏它们。我遇到的问题是时间和指令的优先顺序？当所有代码完成执行后，我只看到提交按钮而不是取消按钮。我相信这是因为ng-if和我试图将我的自定义指令的优先级设置为最后运行的负数，但我认为这仅适用于同一元素上的堆栈指令？我的指令中只定义了一个link函数，我的理解是与post link函数相同，并且应该在子函数完成后运行？最终，我的目标是运行我的指令'last'，这样如果指令中的所有逻辑都通过，我就可以显示两个按钮。

我指令的shell：

angular.module('myModule')
.directive("myCustomSecurityDirective", function(a,b) {
    //
    return {
        restrict: "A",
        priority: -1,
        link: function(scope, element, attrs, ctrl) {
            //custom security role/perm logic using injected services a&b etc
                if (userHasPermission ) {
                    element.find('input, textarea, button').addClass('my-show-css');

                }

        }
    };
});

我最近/今天做了该指令的优先权，但我不认为它在这种特定情况下有任何作用。

Answer 1

即使my-custom-security-directive能够将CSS类附加到按钮并隐藏或显示它，该按钮也有自己的ng-if条件。这意味着按钮可能会被破坏并在以后重新创建，并且它不再具有CSS类。如果按钮使用ng-show而不是ng-if，您可能会有更多控制权，因为按钮会隐藏但仍保留在DOM中。

但我认为my-custom-security-directive可能希望获得更多控制权。您可以使用转置功能，以便my-custom-security-directive充当每组元素的容器，这些元素应根据userHasPermission销毁或创建。

指令：

.directive('myCustomSecurityDirective', function () {
    return {
        transclude: true,
        link: function (scope) {
            scope.userHasPermission = true;
        },
        template: '<div ng-if="userHasPermission" ng-transclude></div>'
    }
});

HTML：

<div my-custom-security-directive>
    <button ng-if="...">cancel</button>
    <button ng-disabled="...">submit</button>
</div>

AngularJS父div指令等待子div堆栈指令完成

1 个答案: