Поведение выражения присваивания, вызванного ng-click внутри ng-repeat

Я пытаюсь обновить мою модель, используя ng-click, прикрепленный к <p>.

У меня нет проблем с выражением присваивания вне ng-repeat или вызовом метода scope внутри ng-repeat. Однако, если я использую назначение внутри ng-repeat, он, кажется, игнорируется. Я не вижу сообщений, сообщаемых в консоли Firefox, но не пробовал устанавливать контрольные точки, чтобы узнать, запущено ли событие.

<!DOCTYPE html>
<html>
<head>
    <title>Test of ng-click</title>
    <script type='text/javascript' src='http://code.angularjs.org/1.1.1/angular.js'></script>
    <script type='text/javascript'>//<![CDATA[ 

        function MyCtrl($scope) {
            $scope.selected = "";
            $scope.defaultValue = "test";
            $scope.values = ["foo", "bar", "baz"];

            $scope.doSelect = function(val) {
                $scope.selected = val;
            }
        }
        //]]>  

    </script>
</head>

<body ng-app>
    <div ng-controller='MyCtrl'>
        <p>Selected = {{selected}}</p>
        <hr/>
        <p ng-click='selected = defaultValue'>Click me</p>
        <hr/>
        <p ng-repeat='value in values' ng-click='selected = value'>{{value}}</p>
        <hr/>
        <p ng-repeat='value in values' ng-click='doSelect(value)'>{{value}}</p>
    </div>
</body>
</html>

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

Ответы

Ответ 1

Директива ngRepeat создает новую область для каждой итерации, поэтому вам нужно ссылаться на переменные в родительской области.

Используйте $parent.selected = value, как в:

<p ng-repeat='value in values' ng-click='$parent.selected = value'>{{value}}</p>

Примечание: вызов функции распространяется из-за прототипального наследования.

Если вы хотите узнать больше: Нюансы Scope Prototypal Inheritance.

Ответ 2

Как отметил @Stewie, $parent является одним из способов решения этой проблемы. Однако рекомендуемое (командой Angular - не определять примитивные свойства в области $. Скорее, $scope должен ссылаться на вашу модель. Использование ссылок также позволяет избежать проблемы (поскольку примитивные свойства не будут созданы в дочерних областях, которые скрывают/теневают свойства родительской области с тем же именем), и вам не нужно запоминать, когда использовать $parent:

HTML:

<p>Selected = {{model.selected}}</p>
<hr/>
<p ng-click='model.selected = defaultValue'>Click me</p>
<hr/>
<p ng-repeat='value in values' ng-click='model.selected = value'>{{value}}</p>
<hr/>
<p ng-repeat='value in values' ng-click='doSelect(value)'>{{value}}</p>

JavaScript:

$scope.model = { selected: ""};
...
$scope.doSelect = function (val) {
   $scope.model.selected = val;
}

Fiddle.

Недавно я обновил страницу вики, о которой упоминал @Stewie, чтобы всегда рекомендовать этот подход.