如何扩展 Angularjs ng-include 指令

How to extend Angularjs ng-include directive?

本文关键字：Angularjs ng-include 指令 扩展 何扩展      更新时间：2023-09-26

我正在尝试用这个扩展ng-include指令：

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

我像这样使用它：

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

但是发出的 get 请求用于：

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

我不确定如何让它插入 inc-comp 属性的值，而不仅仅是在模板字符串中使用文字值。我从这个 SO 问题（第二个答案）中得到了这样做的想法。

该任务也可以在没有ng-include和没有隔离范围的情况下完成，我认为这是一个很好的解决方案：

兹罗提演示在这里

索引.html 

  <div ng-app="app" ng-controller="appCtrl">
    <div add-template type="lion"></div>
    <div add-template type="fox"></div>
  </div>
  <script data-require="angular.js@1.3.x" 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>

祝您乐于助人！

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>"
    };
}]);
相关文章：