用于禁用子元素的Angular指令

时间:2016-11-03 17:01:34

标签: angularjs angularjs-directive

创建一个指令(canUpdate)是否可行,这将使我能够启用/禁用我的angular / web api应用程序的元素,具体取决于测试用户对给定用户组或逗号分隔列表的权限的服务的结果小组也许。

我的想法是:

<div><button can-update="customerMgmt">Edit customer detail</button></div>

并且我的指令可以执行调用以检查此用户是否为customerMgmt组的一部分并正确启用/禁用。

然而,我正在努力想象/理解我的指令模板的样子。

如果您要编写一个执行此类操作的指令,那么您的指令的html模板会是什么样子,因为我希望它适用于任何元素,文本输入,按钮,锚点,标签等。 ..我基本上会说,如果用户不在属性上指定的组中,则禁用/不允许文本输入/单击等...

1 个答案:

答案 0 :(得分:0)

所以我写了以下内容&#34; 出现 &#34;要按照我现在的预期执行,需要在下周测试更多,但似乎启用/禁用依赖于我的permissionsService.permissionsForObject方法返回的内容(这取决于webApi控制器)....这对你有意义吗? ?

    (function () {
    'use strict';

    angular.module('blocks.permissions').directive('canWrite', canWriteDirective);

    function canWriteDirective() {
        return {
            //scope: {},
            restict: "A",
            controller: CanWriteController,
            controllerAs: "vm",
            bindToController: false,
            link: function (scope, iElement, iAttrs, controller) {
                controller.canWrite(iAttrs.canWrite);
            }
        }
    };

    CanWriteController.$inject = ["permissionsService"];

    function CanWriteController(permissionService) {

        var vm = this;
        vm.canWrite = canWrite;
        vm.canUpdate = false;

        function canWrite(group) {
            permissionService.permissionsForObject(group).then(function (result) {
                vm.canUpdate = true;
            }).catch(function (result) {
                vm.canUpdate = false;
            });
        }
    }

})();