带有 Angular 1.5 指令的动态模板 URL

Question

我想在更改路线时更改我的导航栏模板。

我想出了两个解决方案，但我都不是 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-view 中有一个指令声明以获得更简洁的代码。有什么建议么？它说我的导航栏控制器在 ng-view 中是未定义的，这就是为什么解决方案一似乎没有像我预期的那样工作。

Answer 1

我有一个满意的解决方案。

指令：

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>

带有 Angular 1.5 指令的动态模板 URL

Dynamic template URL with Angular 1.5 directive

javascript

angularjs

yeoman-generator-angular