AngularJS - 在其他部分中動態使用部分動作

我對AngularJS相對較新，想知道動態拉入部分模板的可行性。考慮這個抽象（並且爲這個例子簡化）模塊。這本身將是一個將在整個應用程序中重用的部分模板。AngularJS - 在其他部分中動態使用部分動作

偏模塊標記

<div class="module"> 
    <h2 class="module-title">{{module.title}}</h2> 

    <div class="module-content"> 
     {{module.content}} 
    </div> 

</div>

取一些數據客戶端後，我可能想要module.content是簡單的文本串，沒有問題出現。根據我正在使用的數據，如果我可以動態地將其他部分模板插入到module.content中，將會非常有用。例如，在我的回覆中，我有一個我希望顯示的標題列表，是否可以拉入處理標題的部分模板？而在另一個地方，module.content可能是處理圖片庫的部分模板。

任何輸入或方向將不勝感激！

來源

2012-10-04 greaterweb

有幾種方法可供您使用。

最好的選擇是添加自己的directive。擴展你的例子：

module.directive('myModule', function() { 
    return { 
    restrict: 'A', 
    scope : { 
     title : '@' 
    }, 
    templateUrl : '/partial/module.html', 
    transclude : true 
    }; 
});

我們將使用transclusion使內容更靈活。現在部分：

<div class="module"> 
    <h2 class="module-title">{{title}}</h2> 

    <div class="module-content" ng-transclude></div> 
</div>

在安裝了此指令，可以使用下面的HTML：

<div my-module title="{{module.title}}"> 
    {{module.content}} 
</div>

另一種選擇是使用ng-include指令。這是一個局部的簡單transclusion，不同之處是在相同的範圍內transcluded部分生命作爲上下文它被列入英寸

<div ng-include="module.partialUrl"></div>

在上述情況下，角將transclude部分在URL處$scope.module.partialUrl。（編輯：這意味着你可以通過替換ngInclude使用的作用域變量來動態地替換掉UI。真棒吧？）

如果你只是重複使用相同的部分以避免重複的代碼，那麼只需將URL報價：

<div ng-include="'/partial/foo.html'"></div>

來源

2012-10-04 22:34:49 qualidafial

謝謝您提供的信息豐富的回覆！今晚我會玩這個，讓你知道我是怎麼做出來的。 'module.content'部分可以改變，所以我將不得不去自定義指令（或兩個）的路線。 – greaterweb

我已經走了自定義指令的方式，並已能夠完成我所需要的，感謝您的幫助！ – greaterweb

+ for「用單引號括起URL」 – Jackson

AngularJS - 在其他部分中動態使用部分動作

回答

相關問題