如何在Angular中创建一个与ng-repeat隔离的单独范围？答案

【问题标题】：How to create a separate scope isolated from ng-repeat in Angular?如何在Angular中创建一个与ng-repeat隔离的单独范围？
【发布时间】：2015-06-18 13:57:33
【问题描述】：

我是 AngularJS 的新手，在理解 Angular 中的作用域概念时遇到了一些麻烦。我已经阅读了一些关于 stackoverflow 的帖子以及在线文章，它们建议我创建一个自定义指令来创建一个隔离范围，但我无处可去......

至于我正在做的项目，我正在尝试制作一个按钮，单击该按钮将触发一个文本区域。但是，由于 ng-repeat，当我只单击一个按钮时，所有按钮都会触发 textarea。

我的 .js 文件：

angular.module('myApp')
  .controller('myCtrl', function ($scope, Question) {
    scope.visible = false;

    scope.toggle = function() {
      scope.visible = !scope.visible;
  };

  .directive("myDirective", function () {
    return {
      scope: {
        ngClick: '&',
        ngShow: '&'
      }
    }
  });

这是我的 HTML 文件：

<ul>
    <li ng-repeat="object in objectList">
      <button type="text" myDirective ng-click="toggle()">Click</button>
      <textarea myDirective ng-show="visible"></textarea>
    </li>
</ul>

【问题讨论】：

标签： html angularjs

【解决方案1】：

Angular 在 ng-repeating 时创建子（非隔离）作用域，试试这个，当你 ng-init 一个变量时，它只在那个重复的 div 中可见。

<div ng-repeat="i in [0,1,2,3,4,5,6,7,8,9]" ng-init="visible=false">
  <button ng-click="visible=!visible">Toggle</button>
  <h1 ng-show="visible">look at me!</h1>
</div>

Plunker

【讨论】：

【解决方案2】：

不需要使用指令。您需要在 foreach 中使用 object 来引用循环中的每个项目。

为objectList中的每个对象添加可见：

$scope.objectList = [
      { visible: false },
      { visible: false },
      { visible: false }
  ];

那么切换按钮就需要传递对象来切换：

$scope.toggle = function (object) {
  object.visible = !object.visible;
};

ng-show 需要检查object.visible 和ng-click 需要传递对象：

<button type="text" ng-click="toggle(object)">Click</button>
<textarea ng-show="object.visible"></textarea>

Plunkr

【讨论】：