AngularJS: 多次使用 ng-include

Question

我有旧项目。在这一刻我不能重写所有使用 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>

Answer 1

你应该像这样把你的逻辑放在控制器的数组中

$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>

Answer 2

您可以创建一个数组对象并在其上使用 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
    }];

Answer 3

使用 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>

AngularJS: 多次使用 ng-include

AngularJS: many times use ng-include

javascript

html

angularjs

angularjs-ng-include