具有ng-include和单独模板指令的AngularJS动态模板

时间:2017-03-02 14:19:14

标签: angularjs dynamic angularjs-directive angularjs-ng-include angularjs-templates

我想创建一个div,它根据上下文参数动态加载不同的模板:

我的“搜索结果容器”指令:

app.directive("searchResultsContainer", function() {
  restrict: "E",
  templateUrl: "search-results-container.html",
  controller: function($scope) {
    $scope.templates = [
      { viewmode: "list", url: "search-results-list-view.html" },
      { viewmode: "grid", url: "search-results-grid-view.html" },
      { viewmode: "table", url: "search-results-table-view.html" }
    ]
  },
  link: function(scope) {
    scope.toggleView = function() {
      scope.templates.push(scope.templates.shift());
    }
  }
}

我的“search-results-container.html”文件:

<div ng-include="templates[0].url"></div>

我的“search-results-table-view.html”文件:

<table>
  <tr ng-repeat="item in ctrl.items">
    <td>{{ item.title }}</td>
  <tr>
</table>

动态加载模板可以顺利运行。 但是,我希望这些模板在加载完成后运行一些“回调”功能。

我知道有“onload”属性,我可以这样添加:

<div ng-include="templates[0].url" onload="onLoadFunction()"></div>

这意味着我需要使用范围中的“onLoadFunction”填充我原来的“search-results-container”指令,该指令必须使用开关(或类似技术)来区分模板文件并运行具体功能取决于当前活动的 - 我想防止它,因为它不干净。

我想为每个模板设置单独的指令,例如:

app.directive("searchResultsTableView", function() {
    return {
        restrict: "E",
        templateUrl: "search-results-table-view.html",
        controller: function($scope) {
            ...
        },
        link: function(scope) {
          scope.someOnLoadFunction = function() {
            /* Stuff to execute when template has loaded */
          }
        }
    }
});

如果我这样做,我会相应地更改我的“search-results-table-view.html”:

<search-results-table-view>
  <table>
    <tr ng-repeat="item in ctrl.items">
      <td>{{ item.title }}</td>
    <tr>
  </table>
</search-results-table-view>

...我遇到某种无限循环或某种东西而Angular /浏览器崩溃(变得无法响应)。有没有办法实现我的计划,没有用大量的“onLoad”函数填充容器的指令,每个嵌套模板一个?

1 个答案:

答案 0 :(得分:0)

我们最终做的是:

我们有一个指令:

app.directive("searchResultsContainer", function() {
  restrict: "E",
  templateUrl: "search-results-container.html",
  controller: function($scope) {
    $scope.templates = [
      { viewmode: "list", url: "search-results-list-view.html" },
      { viewmode: "grid", url: "search-results-grid-view.html" },
      { viewmode: "table", url: "search-results-table-view.html" }
    ]
  },
  link: function(scope) {
    scope.toggleView = function() {
      scope.templates.push(scope.templates.shift());
    }
  }
}

使用ng-include指令实例化该指令:

<search-results-container ng-include="views/result-list.html"></search-results-container>

使用过的result-list.html文件有这段话:

<div ng-switch on="templates[0].viewmode">
    <search-results-list-view ng-switch-default></gs-search-results-list-view>
    <search-results-grid-view ng-switch-when="grid"></gs-search-results-grid-view>
    <search-results-table-view ng-switch-when="table"></gs-search-results-table-view>
</div>

它有一个按钮,可以使用简单的ng-click指令在视图之间切换:

<button ng-click="toggleViewMode()">Toggle View</button>

此按钮触发searchResultsContainer的toggleView方法,在上面的指令中描述,移动模板数组的元素:

scope.toggleView = function() {
    scope.templates.push(scope.templates.shift());
}

ng-switch指令侦听&#34; viewmode&#34;中的更改。 template数组的第一个元素的属性:

ng-switch on="templates[0].viewmode" 

单击按钮时会发生这种变化,从而完全改变数组中的第一个元素,这自然也会导致&#34; viewmode&#34;属性,由ng-switch监控。

嵌套的ng-switch-default和ng-switch-when指令对更改做出反应并显示相应的元素,该元素具有在&#34; ng-switch-when&#34;中设置的适当值。

ng-switch的三个孩子各自使用一个单独的指令,这里是其中之一:

app.directive("searchResultsListView", function() {
    return {
        restrict: "E",
        require: "^searchResultsContainer",
        template: "<div ng-include=\"'views/list-view.html'\"></div>",
        controller: function($scope) {
            /* $scope stuff goes here */
        },
        link: function(scope, element, attrs, searchResultsCtrl) {
            /* link stuff goes here */
        }
    }
});

注意非常重要的转义引号,然后按照ng-include指令(more info on ng-include)的要求,在模板的ng-include指令中使用高逗号。