Angular中如何设置局部变量并限定其HTML作用域？

这个问题我之前也碰到过！核心原因是你用的ng-init都是在同一个父作用域里赋值，后面的name直接覆盖了前面的，所以最后两个div都读取到最后一次赋值的jane。既然每个div的HTML结构不一样，没法直接用ng-repeat，那咱们可以用这几种方法来隔离局部作用域：

方法1：用ng-controller创建独立子作用域 #

最简单的方式就是给每个需要隔离的div单独绑定一个控制器——哪怕是个空控制器，因为AngularJS每次遇到ng-controller都会创建一个新的子作用域，这样每个div里的变量就不会互相干扰了。

示例代码：

<!-- HTML部分 -->
<div ng-controller="LocalScopeCtrl" ng-init="name='john'">
  <!-- 这里放john对应的独特HTML结构 -->
  {{name}}
</div>
<div ng-controller="LocalScopeCtrl" ng-init="name='jane'">
  <!-- 这里放jane对应的独特HTML结构 -->
  {{name}}
</div>

// JS控制器部分（可以是空的，只需要创建作用域）
angular.module('yourApp').controller('LocalScopeCtrl', function($scope) {
  // 不需要额外逻辑，只是为了生成独立子作用域
});

方法2：自定义隔离作用域指令 #

如果需要在多个地方复用这种隔离逻辑，写一个简单的自定义指令会更优雅。通过设置scope: {}来创建完全隔离的作用域，每个指令实例的变量都是独立的。

示例代码：

// 自定义指令
angular.module('yourApp').directive('isolatedScope', function() {
  return {
    scope: {}, // 声明隔离作用域
    link: function(scope, element, attrs) {
      // 这里可以根据需要处理属性，比如从attrs读取初始值
      // 也可以直接用ng-init在指令内部赋值
    }
  };
});

<!-- 使用指令 -->
<div isolated-scope ng-init="name='john'">
  <!-- john的独特结构 -->
  {{name}}
</div>
<div isolated-scope ng-init="name='jane'">
  <!-- jane的独特结构 -->
  {{name}}
</div>

方法3：结合ng-repeat与自定义模板（可选） #

如果你还是想利用ng-repeat的遍历能力，同时保留每个项的独特结构，可以把每个项的模板单独抽出来，用ng-include加载：

<div ng-repeat="item in [{name:'john', tpl:'john-tpl.html'}, {name:'jane', tpl:'jane-tpl.html'}]">
  <ng-include src="item.tpl"></ng-include>
</div>

然后在john-tpl.html里写：

<!-- john的独特HTML结构 -->
{{item.name}}

jane-tpl.html同理。

这样既利用了遍历，又能保持每个项的结构独立性。

内容的提问来源于stack exchange，提问作者kane