Почему не работает ng-click в ng-repead — Angular?

Question

[KuzmenkoArtem]

Сам код

<table class="friend">
        <tr ng-repeat="i in [1,2,3]">
          <th><a href="" ng-click="predicate = 'name'; reverse=!reverse">Name</a>
        </tr>
        <tr ng-repeat="friend in friends | orderBy:predicate:reverse">
          <td>{{friend.name}}</td>
          <td>{{friend.phone}}</td>
          <td>{{friend.age}}</td>
        </tr>
      </table>

Как можно обойти?

Answer 1

[_ _]

Не работает потому что ng-repeat создает для каждого элемента свой скоуп. При клике вы изменяете данные не в общем скоупе, а в скоупе элемента, и за пределами элемента эти данные не видны

Comments

[KuzmenkoArtem]

можно ли указать глобальный скоуп?

[Mikhail Osher]

KuzmenkoArtem: нормальные люди используют controllerAs синтаксис, а не $scope.

[Артур Мудрик]

Mikhail Osher: Использую $scope, чем controllerAs лучше/правильнее?

[Mikhail Osher]

Артур Мудрик: codetunnel.io/angularjs-controller-as-or-scope

Answer 2

[lega]

Можете попробовать поменять их в $parent scope (т.к. ng-repeat создает дочерний scope)

ng-click="$parent.predicate = 'name'; $parent.reverse=!$parent.reverse"

а лучше использовать имена "с точкой", т.е. использовать какой-нибудь объект для этого, например `settings.predicate, settings.reverse`.

Так же можете попробовать Angular Light, там нет такой проблемы.

Answer 3

[Сергей Протько]

Это довольно известная проблема связанная с тем что скоупы (да и js) при наследовании учитывают только ссылки на объекты.

Решение:

<table class="friend">
        <tr ng-repeat="i in [1,2,3]">
          <th><a href="" ng-click="ctrl.predicate = 'name'; ctrl.reverse=!ctrl.reverse">Name</a>
        </tr>
        <tr ng-repeat="friend in ctrl.friends | orderBy:ctrl.predicate:ctrl.reverse">
          <td>{{friend.name}}</td>
          <td>{{friend.phone}}</td>
          <td>{{friend.age}}</td>
        </tr>
      </table>

где ctrl это либо пустой объект либо (что лучше) - алиас контроллера (controller as синтаксис).

p.s. я понимаючто программирование на html это нынче тренд, но скажем по ngClick вы вообще должны были вызвать метод контроллера который бы установил нужные данные, и тогда проблемы небыло бы вообще. Ну и да, вместо того что бы сортировать массив фильтрами - лучше делать это опять же в обработчике клика - там и запускать рефреш списка. Такими простыми действиями мы не только избавимся от проблем того что кто-то что-то пишет не туда, но и сделаем мир ангуляра чуть лучше.

<table class="friend" ng-controller="FriendsController as friends">
        <tr ng-repeat="i in [1,2,3]">
          <th><a href="" ng-click="friends.resort('name')">Name</a>
        </tr>
        <tr ng-repeat="friend in friends.list">
          <td>{{friend.name}}</td>
          <td>{{friend.phone}}</td>
          <td>{{friend.age}}</td>
        </tr>
      </table>

function FriendsController(friendsList, orderByFilter) {
    var vm = this, $sortBy, $reverseSort
    vm.resort = resort;

    resort('name');

    function resort(sortBy) {
          $reverseSort = $sortBy === sortBy ? !$reverseSort : false;
          $sortBy = sortBy;
          vm.list = orderByFilter(friendList, sortBy, $reverseSort);
    }
}

Данный код просто как пример того как это могло бы быть реализовано.

Comments

[KuzmenkoArtem]

спасибо

Answer 4

[Артур Мудрик]

То, что вы прямо в ХТМЛ-коде пишете логику — гиперужасное дилетантство. На ng-click должна быть повешана функция, и уже в контроллере нужно писать логику, присваивать какие-то переменные и прочее, но ни в коем случае не в шаблоне, ибо получается уродское месиво.