He estado luchando con un problema de alcance al hacer una directiva de mensaje de error usando AngularJS.

Tengo una directiva ng-if y ng-class como parte de la plantilla de directiva, pero la expresión en la directiva ng-class siempre parecía devolver una cadena en blanco, a menos que:

Eliminé la directiva ng-if.o, eliminé la clave 'reemplazar' en el objeto de definición de directiva.

Al observar la salida compilada de mi directiva, parece que se está creando un ámbito aislado si se elimina la clave ng-if o la tecla de reemplazo, pero si ambos se dejan, entonces no hay clases ng-isolate-scope en el salida html, solo ng-scope.

Realmente me gustaría entender exactamente lo que está sucediendo aquí y agradecería cualquier explicación.

Definición de directiva

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>'
    };
});

Salida (nota: no se agrega clase de alerta de peligro)

<!-- 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>

se agrega la clase alert-danger después de eliminar el reemplazo (eliminar ng-if también funcionaría)

<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>