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

回答

相关问题