在角度指令中用 ng-if 替换：true答案

【问题标题】：“replace: true” with ng-if in angular directive在角度指令中用 ng-if 替换：true
【发布时间】：2016-07-03 20:51:54
【问题描述】：

我创建了新的自定义 angularjs 指令（d-emails）。该指令的模板包含“ng-if”指令。在这个指令中我们可以看到“replace: true”。这样做的主要原因 - 只是因为我想检查指令内的用户角色，然后如果用户没有适当的角色来从 html 中删除整个元素。我不想在 html 中留下带有 class="col-sm-6" 的元素。但是当我编写这段代码时，我意识到在这种情况下我不能使用隔离范围。 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>

【问题讨论】：

标签： angularjs angularjs-directive

【解决方案1】：

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

【讨论】：

谢谢！有时从另一边看问题很有用:-)
对此解决方案再添加一条评论。在这种情况下，我们的模板将在之前渲染。当然，我们可以在模板的根目录中添加“ng-show”之类的内容，但我认为这不是最好的解决方案。