angularjs – 隔离范围问题和angular指令中的“replace：true”

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

>我删除了ng-if指令.
>或者,我删除了指令定义对象中的’replace’键.

查看我的指令的编译输出,如果删除了ng-if或replace键,看起来像是创建了一个隔离的范围,但是如果它们都被保留,那么就没有ng-isolate-scope类. 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>

删除替换后添加alert-danger类(删除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>