AngularJS动态模板NG-包括独立的模板指令

我想创造出动态加载不同的模板一个div，基于上下文参数：AngularJS动态模板NG-包括独立的模板指令

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

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

我的 “搜索结果的container.html” 文件：

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

我的 “搜索结果的表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“，它必须使用开关（或类似技术）来区分模板文件并根据当前活动的函数运行特定的函数 - 我想阻止它，因为它不干净。

我想有不同的配置指令为每个模板，如：

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 */ 
      } 
     } 
    } 
});

如果我这样做，我改变我的“搜索结果的表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”函数来填充容器的指令，每个嵌套模板都有一个函数？

来源

2017-03-02 tricon

我们落得这样做是这样的：

我们有一个指令：

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>

的使用结果-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-点击指令：

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

此按钮触发searchResultsContainer的toggleView方法，在该指令中描述上面，移动模板阵列的元素：

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

ng-switch指令侦听第一个“viewmode”属性的更改模板阵列的元件：

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

这种点击该按钮时，从而改变阵列中的第一个元素完全，这自然也将导致“视图模式”属性的改变，通过NG-监视的改变发生开关。

嵌套的ng-switch-default和ng-switch-when指令对更改作出反应并显示根元素，该元素具有在“ng-switch-when”中设置的适当值。

的NG-开关分别使用单独的指令的三个孩子，这里就是其中之一：

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-包括指令，如ng-include指令所要求的（more info on ng-include）。

来源

2017-04-04 09:11:45 tricon

AngularJS动态模板NG-包括独立的模板指令

回答

相关问题