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

I am new to AngularJS and have some trouble understanding the concept of scope in Angular. I have read some posts on * as well as online articles, which advise me to create a custom directive to create an isolate scope, but I am getting nowhere...

我是AngularJS的新手,在理解Angular中的范围概念方面遇到了一些麻烦。我已经阅读了有关*和在线文章的一些帖子,它建议我创建一个自定义指令来创建一个隔离范围,但我无处可去......

As for the project I'm working on, I am trying to make a button that when clicked, will trigger a textarea. However, because of ng-repeat, the textarea is triggered for all buttons while I click only one.

至于我正在研究的项目,我试图制作一个按钮,当点击时,将触发一个textarea。但是,由于ng-repeat,当我只点击一个按钮时,会触发所有按钮的textarea。

My .js file:

我的.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: '&'
      }
    }
  });

Here is my HTML file:

这是我的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>

2 个解决方案

#1

Angular is creating child (NOT isolated) scope when ng-repeating, try this out, when you ng-init a variable, it is only visible within that repeat div.

当ng-repeating时,Angular会创建子(非隔离)范围,尝试这样做,当你初始化一个变量时,它只能在那个重复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

There is no need to use a directive. You need to use object in the foreach to refer each item in the loop.

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

Add visible to each object in objectList:

在objectList中为每个对象添加可见:

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

Then the toggle button will need to pass the object to toggle:

然后切换按钮需要将对象传递给切换:

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

The ng-show will need to check object.visible and ng-click will need to pass the object:

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

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

Plunkr

#1