AngularJS: установка переменной в области с расширением ng-repeat

Как мне получить доступ к набору областей, сгенерированных ng-repeat?

Я полагаю, что в основе этого лежит тот факт, что я не совсем понимаю, как отношения работают между a) коллекцией объектов, которые я передаю в директиву ng-repeat, и b) набором областей, которые он генерирует, Я могу поиграть с (a), который просматривает и захватывает область ng-repeat, но как установить переменные в самой области (b)?

Мой вариант использования состоит в том, что у меня есть набор элементов, повторяющихся с помощью ng-repeat, каждый из которых имеет вид редактирования, который переключается с помощью ng-show/ng-hide; состояние для каждого элемента хранится в переменной в локальной области. Я хочу, чтобы иметь возможность вызвать ng-show для определенного элемента, но я хочу, чтобы триггер вызывался из вне ng-repeat, поэтому мне нужно иметь доступ к локальной переменной области видимости.

Может ли кто-нибудь указать мне в правильном направлении (или сказать мне, если я лаю неправильное дерево)?

Спасибо

Обновление: Ссылка ниже была очень благодарна. В конце я создал директиву для каждого из повторяющихся элементов и использовал функцию директивной ссылки, чтобы добавить ее область в коллекцию в области корня.

ОТВЕТЫ

Ответ 1

При работе в иерархии областей я считаю очень полезным отправлять события с помощью $emit и $broadcast. $ emit отправляет событие вверх, поэтому ваши дочерние области могут уведомлять родительские области определенного события. $ broadcast - это наоборот.

В качестве альтернативы, поскольку дочерние области имеют доступ к свойствам родительской области, вы можете инициировать изменения, используя $watch для определенного свойства в родительской области.

ОБНОВЛЕНИЕ: Что касается доступа к дочерним областям, это может оказаться полезным для вас: Получить все дочерние области в Angularjs с учетом родительской области

Ответ 2

Вот довольно простой способ сделать то, что, как я думаю, вы пытаетесь сделать (я понял это, когда мне нужно было сделать что-то подобное):

Мы знаем, что каждый повторный элемент имеет свою собственную область, созданную для него. Если мы сможем передать эту область методу, определенному в родительской области, то мы сможем сделать то, что хотим с ней, с точки зрения манипулирования или добавления свойств. Оказывается, это можно сделать, передав this в качестве аргумента:

Пример

// collection on controller scope
$scope.myCollection = [
  { name: 'John', age: 25 },
  { name: 'Barry', age: 43 },
  { name: 'Kim', age: 26 },
  { name: 'Susan', age: 51 },
  { name: 'Fritz', age: 19 }
];



// template view
<ul>
  <li ng-repeat="person in myCollection">
    <span ng-class="{ bold : isBold }">{{ person.name }} is aged {{ person.age }} </span>
    <button class="btn btn-default btn-xs" ng-click="toggleBold(this)">toggle bold</button>
  </li>
</ul>

Итак, когда мы нажимаем кнопку "Переключить жирный шрифт", мы вызываем метод $scope.toggleBold(), который нам нужно определить в контрольной сумме $. Обратите внимание, что мы передаем this в качестве аргумента, который фактически является текущим объектом ng-repeat scope.

Поэтому мы можем манипулировать им следующим образом

$scope.toggleBold = function(repeatScope) {
  if (repeatScope.isBold) {
    repeatScope.isBold = false;
  } else {
    repeatScope.isBold = true;
  }
};

Вот рабочий пример: http://plnkr.co/edit/Vg9ipoEP6wxG8M1kpiW3?p=preview

Ответ 3

Ben Nadel дал довольно чистое решение "как мне назначить проблему ngRepeat $scope", которую я только что реализовал в своем собственном проекте. По существу, вы можете добавить директиву ngController рядом с вашим ngRepeat и манипулировать ngRepeat $scope внутри контроллера.

Ниже приведен мой собственный надуманный пример, который демонстрирует назначение ngRepeat $scope в контроллере. Да, есть лучшие способы сделать это точно. См. сообщение Бен Надела для лучшего примера.

<div ng-controller="ListCtrl">
  <h1>ngRepeat + ngController</h1>
  <ul>
    <li ng-repeat="item in items" ng-controller="ItemCtrl" ng-show="isVisible">
      {{item.name}}
      <button ng-click="hide()">hide me!</button>
    </li>
  </ul>
</div>

<script type="text/javascript">
  var app = angular.module("myApp", []);

  app.controller("ListCtrl", function($scope) {
    $scope.items = [
      {name: "Item 1"},
      {name: "Item 2"},
      {name: "Item 3"}
    ];
  });

  app.controller("ItemCtrl", function($scope) {
    $scope.isVisible = true;
    $scope.hide = function() {
      $scope.isVisible = false;
    };
  });
</script>

РЕДАКТИРОВАТЬ: Перечитав свой вопрос, увидев, что вам нужно манипулировать связкой дочерних областей в родительской области, я считаю, что ваш подход (директивы) - это путь. Я все еще думаю, что этот ответ может быть полезен для некоторых, поскольку я наткнулся на ваш вопрос, ища этот ответ.