AngularJS：多次使用ng -include

我有舊的項目。在這一刻，我不能重寫所有使用ng-view和路線。所以我有大的html文件和許多不可讀的代碼。AngularJS：多次使用ng -include

<div ng-if="f1"> 
    <div>...</div> 
</div> 
<div ng-if="f2"> 
    <div>...</div> 
</div> 
<div ng-if="f3"> 
    <div>...</div> 
</div> ....etc

我想打破這種代碼成塊，並使用ng-include清理代碼。但是我會有很多這個標籤（> 10）。這是正常的嗎？有沒有辦法以不同的方式重組文件？

<div ng-if="f1" ng-include="url1"> </div> 
<div ng-if="f2" ng-include="url2"> </div> 
<div ng-if="f3" ng-include="url2"> </div>

來源

2017-08-03 Lola

你應該把你的邏輯陣列，控制器這樣

$scope.paths = [ 
     {url : "url1" , condition: $scope.f1}, 
     {url : "url2" , condition: $scope.f2}, 
     {url : "url3" , condition: $scope.f3}, 
];

，然後用它在HTML這樣

<div ng-repeat="item in paths"> <div ng-if="item.condition" ng-include="item.url"></div> </div>

來源

2017-08-03 10:23:19

您在看到我之後更改了答案。獲得所有讚揚。好的策略：p – Vivz

沒有在發佈我的答案後，我以爲我犯了一個錯誤，我只是更新了它，並看到你的答案和我一樣，現在它的答案，他的答案他接受 –

您可以創建一個數組對象，使用ng-repeat就可以了。

HTML：

<div ng-repeat="template in templates"> 
    <div ng-if="template.f" ng-include="template.url"> </div> 
</div>

//Array of objects that contain your checks and template urls 
    $scope.templates = [{ 
     "url": value, 
     "f": value 
    }, { 
     "url": value, 
     "f": value 
    }, ....., 
    { 
     "url": value, 
     "f": value 
    }];

來源

2017-08-03 10:24:54 Vivz

這是很好用NG-路線，但如果你不舒服，然後這裏是一個黑客。像這樣創建一個JSON數據：

$scope.myAllTemplate = [{ 
    "isShown":false, "url":"/myTemplateURL1","templateName":"Template1"},{ 
    "isShown":false, "url":"/myTemplateURL2","templateName":"Template2"},{ 
    "isShown":false, "url":"/myTemplateURL3","templateName":"Template3"} 
]

從那裏您可以切換渲染模板的名稱的NG-如果通過單擊事件

<div ng-repeat="item in myAllTemplate "> 
    <anyTag ng-click="changeTemplate(item)">item.templateName</anyTag> 
</div>

控制器功能

$scope.changeTemplate = function(data){ 
    data.isShown = true; 
    //here you can handle the template according to your wish 
}

最後，渲染模板

<div ng-repeat="item in myAllTemplate "> 
    <div ng-if="item.isShown" ng-include="item.url"></div> 
</div>

來源

2017-08-03 10:43:44 jesusverma

AngularJS：多次使用ng -include

回答

相關問題