如何在angularjs中手動從控制器中注入部分

Question

我是Angular世界的新手，並在如何控制局部裝載方面苦苦掙扎。 在我的應用程序中更改下拉值我從服務器獲取模板URL（我要呈現的部分的url）。 現在使用該模板URL我想在我的頁面中加載該部分。 我知道插入部分可以使用指令完成，但是如何在指令中更改模板url以加載不同的部分？ 簡單來說，我在我的控制器中更改部分方法 ，從服務器獲取模板URL，在ng-change事件中我調用此函數，現在我如何使用模板url在我的目標占位符中呈現部分？

Answer 1

您只需使用ng-include指令加載部分。 將其值綁定到包含partial的URL的變量。 此變量可以綁定到下拉列表（或其他任何內容）。 這樣，如果您在下拉列表中選擇一個項目，則會更新部分URL，從而加載相應的部分。

看看下面的片段（或者Plunkr ，如果你想自己玩它！），它做同樣的事情：

 angular.module('app', []) .controller("MainCtrl", function() { this.partialId = 1; this.getPartialUrl = function() { return 'partial' + this.partialId + '.html'; } });

 <!DOCTYPE html> <html ng-app="app"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script type="text/ng-template" id="partial1.html"> <h2>Partial 1</h2> <p>Content loaded from FIRST partial</p> </script> <script type="text/ng-template" id="partial2.html"> <h2>Partial 2</h2> <p>Content loaded from SECOND partial</p> </script> </head> <body ng-controller="MainCtrl as Main"> <h1>Partials from dropdown</h1> <select ng-model="Main.partialId"> <option value="1">Partial 1</option> <option value="2">Partial 2</option> </select> <div ng-include="Main.getPartialUrl()"></div> </body> </html>

如何在angularjs中手動從控制器中注入部分

問題描述

1 個解決方案

解決方案1
9 已采納 2014-10-20 15:26:14

如何在angularjs中手動從控制器中注入部分

問題描述

1 個解決方案

解決方案1 9 已采納 2014-10-20 15:26:14

解決方案1
9 已采納 2014-10-20 15:26:14