AngularJS: 多次使用 ng-include
AngularJS: many times use ng-include
我有旧项目。在这一刻我不能重写所有使用 ng-view
和路线。所以我有很大的 html
文件和许多不可读的代码。
<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>
你应该像这样把你的逻辑放在控制器的数组中
$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>
您可以创建一个数组对象并在其上使用 ng-repeat
。
HTML:
<div ng-repeat="template in templates">
<div ng-if="template.f" ng-include="template.url"> </div>
</div>
JS
//Array of objects that contain your checks and template urls
$scope.templates = [{
"url": value,
"f": value
}, {
"url": value,
"f": value
}, .....,
{
"url": value,
"f": value
}];
使用 ng-route 很好,但如果你不习惯,那么
这是一个技巧。
像这样创建一个 json 数据:
$scope.myAllTemplate = [{
"isShown":false, "url":"/myTemplateURL1","templateName":"Template1"},{
"isShown":false, "url":"/myTemplateURL2","templateName":"Template2"},{
"isShown":false, "url":"/myTemplateURL3","templateName":"Template3"}
]
渲染模板的名称,您必须通过点击事件切换 ng-if
<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>
我有旧项目。在这一刻我不能重写所有使用 ng-view
和路线。所以我有很大的 html
文件和许多不可读的代码。
<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>
你应该像这样把你的逻辑放在控制器的数组中
$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>
您可以创建一个数组对象并在其上使用 ng-repeat
。
HTML:
<div ng-repeat="template in templates">
<div ng-if="template.f" ng-include="template.url"> </div>
</div>
JS
//Array of objects that contain your checks and template urls
$scope.templates = [{
"url": value,
"f": value
}, {
"url": value,
"f": value
}, .....,
{
"url": value,
"f": value
}];
使用 ng-route 很好,但如果你不习惯,那么 这是一个技巧。 像这样创建一个 json 数据:
$scope.myAllTemplate = [{
"isShown":false, "url":"/myTemplateURL1","templateName":"Template1"},{
"isShown":false, "url":"/myTemplateURL2","templateName":"Template2"},{
"isShown":false, "url":"/myTemplateURL3","templateName":"Template3"}
]
渲染模板的名称,您必须通过点击事件切换 ng-if
<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>