Question

我创建了新的自定义angularjs指令（d-emails）。该指令的模板包含＆＃34; ng-if＆＃34;指示。在这个指令中我们可以看到＆＃34; replace：true＆＃34;。这样做的主要原因 - 仅仅是因为我想检查指令中的用户角色，然后如果用户没有适当的角色从html中删除整个元素。我不想在课堂上留下元素=＆＃34; col-sm-6＆＃34;在HTML内部。但是当我编写这段代码时，我意识到在这种情况下我不能使用隔离范围。 Ng-if删除了我的隔离范围并添加了从父范围继承的新范围。有什么建议如何管理这种情况？我看到类似的问题Issue with isolated scope and "replace: true" in angular directive，但我找不到合适的解决方案。

function dEmails() {
    var directive = {
        scope: {},
        bindToController: {
            entityId: "=",
            entityType: "="
        },
        controllerAs: "vm",
        templateUrl: "/directives/d-emails.tmpl.html",
        restrict: "E",
        controller: dEmailsController,
        replace: true
    };
    return directive;
}

dEmailsController.$inject = ['roleService'];

function dEmailsController(roleService) {
    var vm = this;
    init();
    var roleId = 4;
    vm.isApproved = false;

    function init() {
        roleService.hasRole(roleId).then(function(isApproved) {
            vm.isApproved = isApproved;
            if (isApproved) {
                emailResource.get({ entityId: vm.entityId, entityType: vm.entityType }).$promise.then(function(response) {
                    vm.list = response.Result;                        
                });
            }
        });
    }
}

其中d-emails.tmpl.html如下所示：

<div class="email-item" ng-if="vm.isApproved">
    <div>Content of my super directive</div>
</div>

我使用此指令的代码：

<d-emails class="col-sm-6" entity-id="vm.entityId" entity-type="vm.entityType.event">
</d-emails>

Answer 1

当vm.isApproved为false时，不使用ng-if只删除指令中的元素。

在angular指令中使用ng-if“替换：true”

1 个答案: