每个ng-include模板的单独变量

时间:2016-05-02 21:39:22

标签: javascript angularjs

Angular中是否有办法专门为使用ng-include导入的模板创建变量?我的意思是变量只能在包含的模板中访问。例如:

<ng-include src="template.html" ng-init="varName = lists[0]"></ng-include>
<ng-include src="template.html" ng-init="varName = lists[0]"></ng-include>

在当前设置中,varName的第一个init被varName的第二次初始化覆盖,因为它们在同一范围内。我想要做的是varName应该只在该模板的范围内,以便第二个varName被视为一个不同的变量。

由于

1 个答案:

答案 0 :(得分:0)

使用具有隔离范围的指令。

angular
  .module("app", [])
  .directive("var", [function() {
    return {
      restrict: "E",
//      templateUrl: "template.html", this also works
      template: "<div><pre>{{ value | json }}</pre></div>",
      scope: {
        value: "="
      }
    };
  }]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-init="lists = [{ value: 1 }, { value: 2 }, { value: 3 }]">
  
    <var value="lists[0]"></var>
    <var value="lists[1]"></var>

</div>