angularjs - Angular 指令中的隔离范围和 "replace: true"问题

Question

在使用 AngularJS 制作错误消息指令时，我一直在努力解决范围问题。

我有一个 ng-if 和 ng-class 指令作为指令模板的一部分，但 ng-class 指令中的表达式似乎总是返回一个空字符串，除非:

我删除了 ng-if 指令。

或者，我删除了指令定义对象中的“替换”键。

查看我的指令的编译输出，如果 ng-if 或 replace 键被删除，它看起来像是在创建一个隔离的范围，但如果它们都留在里面，那么在html 输出，只是 ng-scope。

我真的很想确切地了解这里发生了什么，并感谢您的任何解释。

指令定义

angular.module('myMessages')
.directive('pageMessages', function() {

    return {
        restrict: 'E',
        replace: true,
        scope: {
            messages: '='
        },
        controller: function($scope) {
            $scope.severity = 'alert-success';
        },
        template: '<div ng-if="messages.length > 0">' +
                    '<div class="alert" ng-class="severity">' + 
                        '<ul>' + 
                            '<li ng-repeat="m in messages">{{::m.message}}</li>' +
                        '</ul>' +
                    '</div>' +
                  '</div>'
    };
});

输出(注意没有添加警报危险类)

<!-- ngIf: messages.length > 0 -->
<div ng-if="messages.length > 0" messages="messages" class="ng-scope">
    <div class="alert" ng-class="severity">
        <ul>
        <!-- ngRepeat: m in messages -->
            <li ng-repeat="m in messages" class="ng-binding ng-scope">test error</li>
        <!-- end ngRepeat: m in messages --></ul>
    </div>
</div>
<!-- end ngIf: messages.length > 0 --></div>

删除替换后添加警报危险类(删除 ng-if 也可以)

<page-messages messages="messages" class="ng-isolate-scope">
    <!-- ngIf: messages.length > 0 -->
    <div ng-if="messages.length > 0" class="ng-scope">
        <div class="alert alert-danger" ng-class="severity">
            <ul>
            <!-- ngRepeat: m in messages -->
                <li ng-repeat="m in messages" class="ng-binding ng-scope">test error</li>
            <!-- end ngRepeat: m in messages -->
            </ul>
        </div>
    </div>
    <!-- end ngIf: messages.length > 0 -->
</page-messages>

Answer 1

真实的工作ng-if克隆一个原始元素并赋予它继承的范围。它为此使用了嵌入，这允许 ng-if在具有隔离作用域的元素上获得继承作用域，避免 $compile:multidir错误 Multiple directives requesting new/isolated scope判决。

好消息是，如果在具有隔离作用域的元素上使用它，它不会抛出错误。坏处是当在具有更高优先级(ng-if 优先级为 600)的指令上使用时，它只会替换它，而忽略它的作用域。另一件坏事是，当在具有独立作用域的指令的根模板元素上使用时(如这个)，它只会用从父作用域继承其作用域的克隆元素替换元素(属于指令的父元素，因为它自己的元素已被替换为 replace )。

所以它只是得到 severity值来自 pageMessages父作用域和评估 ng-class如果它不存在，则表达式为空字符串。

解决办法是不使用ng-if在带有 replace 的指令的根元素上旗帜。 replace旗has got deprecation status ，这意味着 issues won't be fixed .当指令的模板获得额外的 <div> 时包装器(尽管它可能违背 replace 的目的)，一切都应该按预期工作。