Как расширить директиву Angularjs ng-include?

Я пытаюсь расширить директиву ng-include следующим образом:

module.directive('incComp', [function () {
    return {
        template: "<div ng-include=\"'app/component/{{incComp}}/template.html'\"></div>"
    };
}]);

и я использую это так:

    <div inc-comp="counter"></div>

но запрос на получение, который выходит, предназначен для:

/app/component/%7B%7BincComp%7D%7D/template.html

Я не уверен, как заставить его вставить значение атрибута inc-comp, а не просто использовать буквальное значение в строке шаблона. Я понял это из этого SO-вопроса (2-й ответ).


javascript angularjs angularjs-ng-include
person Daniel Robinson    schedule 12.03.2015    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Задачу также можно выполнить без ng-include и без isolated-scope, хорошее решение, я думаю:

демонстрация plnk здесь

index.html

  <div ng-app="app" ng-controller="appCtrl">
    <div add-template type="lion"></div>
    <div add-template type="fox"></div>
  </div>
  <script data-require="[email protected]" src="https://code.angularjs.org/1.3.14/angular.js" data-semver="1.3.14"></script>
  <script type="text/javascript">
    var app = angular.module("app", []); 
    app.directive('addTemplate', function() {
      return {
        templateUrl: function(elem, attr) {
          return 'template_' + attr.type + '.html';
        }
      }
    });
  </script>

template_fox.html

<div> This is Fox Template </div>

template_lion.html

<div> This is Lion Template </div>

Счастливая помощь!

person Zeeshan Hassan Memon    schedule 12.03.2015
comment
Я забыл, что ты можешь это сделать. - person jlowcs; 14.03.2015

arrow_upward
2
arrow_downward

incComp в вашем шаблоне ничего не оценивается. Вам нужно добавить его в свою область. И ng-include принимает выражение, а не шаблон. Что-то вроде этого должно работать лучше:

module.directive('incComp', [function () {
    return {
        scope: true,
        controller: function($scope, $element, $attrs) {
            $scope.tpl = 'app/component/' + $attrs.incComp + '/template.html'
        },
        template: "<div ng-include=\"tpl\"></div>"
    };
}]);

Вы также можете сделать это в функции ссылки вместо контроллера.

Хотя я не тестировал...

РЕДАКТИРОВАТЬ: я полагаю, вы также можете сделать что-то вроде этого:

module.directive('incComp', [function () {
    return {
        scope: {
            incComp: '@'
        },
        template: "<div ng-include=\"'app/component/' + incComp + '/template.html'\"></div>"
    };
}]);
person jlowcs    schedule 12.03.2015
comment
Эти два способа приводят к одному и тому же результату, но имеют разные плюсы и минусы. Один создает контроллер, другой создает изолированную область... - person jlowcs; 13.03.2015