Dynamische Vorlagen-URL mit Angular 1.5 Direktive

Ich möchte meine Navbar-Vorlage bei einer Routenänderung ändern.Dynamische Vorlagen-URL mit Angular 1.5 Direktive

Ich habe zwei Lösungen gefunden, aber ich bin auch nicht 100% zufrieden.

1) Ich kann ein ng-include außerhalb meiner Sicht definieren.

angular.module('automatclubApp') 
    .directive('navbar', function (PartialsPath) { 
    return { 
     restrict: 'E', 
     controller: 'NavbarCtrl', 
     controllerAs: 'navCtrl' 
    }; 
    }) 
    .controller('NavbarCtrl', function(PartialsPath, $scope, $location) { 
    $scope.$on('$locationChangeSuccess', function(/* EDIT: remove params for jshint */) { 
     var path = $location.path(); 
     //EDIT: cope with other path 
     $scope.templateUrl = (path==='/') ? '../scripts/directives/partials/navbar.html' : '../scripts/directives/partials/navbar_lobby.html'; 
    }); 
    });

Und dann sind dies in meinem Index:

<body> 
    <div ng-controller='NavbarCtrl'> 
     <div ng-include='templateUrl'></div> 
    </div> 
    <div ng-view=""></div> 
</body>

2) In meiner Ansichten/main.html Datei, kann ich ein ng-umfassen wie folgt umfassen:

<ng-include src="'../scripts/directives/partials/navbar.html'"></ng-include>

Idealerweise hätte ich gerne eine Deklaration in meiner ng-view für etwas saubereren Code. Irgendwelche Vorschläge? Es sagt, dass mein Navbar-Controller undefiniert ist, wenn ich es in ng-view kann, weshalb es scheint, dass Lösung nicht funktioniert, wie ich es beabsichtigte.

Quelle

2016-09-13 Tulun

Ist es hilfreich für Sie Richtlinie param 'Vorlage zu verwenden: function (...) {.. .} '? –

Es sagt $ scope. $ On ist keine Funktion, wenn ich versuche, diese Logik nur auf Vorlage zu verschieben. – Tulun

http://stackoverflow.com/questions/25341641/how-to-use-ascope-in-directive-template ist eine ähnliche Frage. –

Ich habe eine Lösung, mit der ich zufrieden bin.

Richtlinie:

angular.module('automatclubApp') 
    .controller('NavbarCtrl', function($scope, $location) { 
    // $scope.myTemplate = '<span class="custom-tpl" style="color: white"> my template </span>'; 
    $scope.getTemplateUrl = function() { 
     var path = $location.path(); 
     return path ==='/' ? '../scripts/directives/partials/navbar.html' : '../scripts/directives/partials/navbar_lobby.html'; 
    }; 
    }) 
    .directive('navbar', function ($compile) { 
    return { 
     restrict: 'E', 
     template: '<ng-include src="getTemplateUrl()">' 
    }; 
    });

, die in der Ansicht wie folgt aufgerufen werden können:

<div ng-controller='NavbarCtrl'> 
    <navbar></navbar> 
</div>

Quelle

2016-09-13 21:28:11 Tulun

Dynamische Vorlagen-URL mit Angular 1.5 Direktive

Antwort

Verwandte Themen