Html 如何在Angular中创建与ng repeat隔离的单独范围？

我是AngularJS的新手，在理解AngularJS中范围的概念时遇到了一些困难。我读过一些关于stackoverflow的帖子和在线文章，这些文章建议我创建一个自定义指令来创建一个隔离作用域，但我什么也没有得到

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

My.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>

点击

无需使用指令。您需要在foreach中使用

object

，以引用循环中的每个项目

添加对

对象列表中的每个对象可见的内容

：

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

然后，“切换”按钮将需要传递要切换的对象：

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

ng show需要检查

对象。visible

和

ng click

需要通过对象：

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

点击

Angular在ng repeat时正在创建子（非隔离）作用域，请尝试此操作，当ng init变量时，它仅在该repeat 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>

切换
看看我！