Ich habe Probleme mit dem Gültigkeitsbereich, wenn ich mit AngularJS eine Fehlermeldung erstellt habe.

Ich habe eine ng-if- und eine ng-class-Direktive als Teil der Direktivenvorlage, aber der Ausdruck in der ng-class-Direktive schien immer eine leere Zeichenfolge zurückzugeben, es sei denn:

Ich habe die ng-if-Direktive entfernt.oder, ich habe den 'Ersetzen'-Schlüssel im Direktivendefinitionsobjekt entfernt.

Betrachtet man die kompilierte Ausgabe für meine Direktive, so sieht es so aus, als würde ein isolierter Bereich erstellt, wenn der ng-if- oder der Ersetzungsschlüssel entfernt wird, aber wenn beide in belassen werden, dann gibt es keine Klassen in ng-isolate-scope die HTML-Ausgabe, nur ng-scope.

Ich würde wirklich gerne genau verstehen, was hier vor sich geht und wäre für Erklärungen dankbar.

Direktive Definition

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

Output (beachten Sie, dass keine Alert-Gefahrenklasse hinzugefügt wird)

<!-- 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 class wird nach dem Entfernen von replace hinzugefügt (Entfernen von ng-if würde ebenfalls funktionieren)

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