Я боролся с проблемой области видимости при создании директивы сообщения об ошибке, используя AngularJS.

У меня есть директива ng-if и ng-class как часть шаблона директивы, но выражение в директиве ng-class всегда, казалось, возвращало пустую строку, если только:

Я удалил директиву ng-if.или я удалил ключ замены в объекте определения директивы.

Глядя на скомпилированный вывод для моей директивы, похоже, что создается изолированная область видимости, если удален ключ 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>

класс оповещения об опасности добавляется после удаления замены (также будет работать удаление ng-if)

<page-messages messages="messages" class="ng-isolate-scope">
    <!-- ngIf: messages.length > 0 -->
    <div ng-if="message,s.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>