URL-адрес динамического шаблона с директивой Angular 1.5

Я хочу изменить свой шаблон панели навигации при изменении маршрута.

Я придумал два решения, но ни одним из них я не доволен на 100%.

1) Я могу определить ng-include за пределами моего представления.

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

А затем включите это в мой индекс:

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

2) В моем файле views/main.html я могу включить ng-include следующим образом:

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

В идеале я хотел бы иметь объявление директивы в моем ng-представлении для более чистого кода. Какие-либо предложения? Он говорит, что мой контроллер навигационной панели не определен, когда я могу это сделать в ng-view, поэтому кажется, что первое решение не работает так, как я предполагал.


javascript angularjs yeoman-generator-angular
person Tulun    schedule 13.09.2016    source источник
comment
Полезно ли вам использовать параметр директивы template: function (...){...}?   -  person Makarov Sergey    schedule 13.09.2016
comment
Он говорит, что $scope.$on не является функцией, если я попытаюсь перенести эту логику только на шаблон.   -  person Tulun    schedule 13.09.2016
comment
stackoverflow.com/ questions/25341641/ — аналогичный вопрос.   -  person Makarov Sergey    schedule 13.09.2016
comment
Это был хороший намек на получение доступа к компиляции, но я не могу применить к нему функцию, не получив максимальную перегрузку стека. angular.js: 13920 RangeError: превышен максимальный размер стека вызовов. Кажется, это немного неприятная проблема :) Кажется, сложно поместить это изменение маршрута динамического шаблона в ng-view...   -  person Tulun    schedule 14.09.2016

Ответы (1)


arrow_upward
0
arrow_downward

У меня есть решение, которым я доволен.

Директива:

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

Который можно вызвать в представлении следующим образом:

<div ng-controller='NavbarCtrl'>
  <navbar></navbar>
</div>
person Tulun    schedule 13.09.2016