34

我正在尝试使用ng-click附加到<p>.

我对 .之外的赋值表达式ng-repeat或在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 在这里，如果您愿意（以及几个早期的变体）。

4

2 回答 2

79

指令 ngRepeat 为每次迭代创建一个新范围，因此您需要在父范围中引用您的变量。

使用$parent.selected = value，如：

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

注意：函数调用由于原型继承而传播。

如果您想了解更多信息：范围原型继承的细微差别。

于 2013-03-13T14:45:58.977 回答
21

正如@Stewie 提到的， $parent 是解决此问题的一种方法。但是，推荐的（由 Angular 团队）解决方案是不要在 $scope 上定义原始属性。相反， $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;
}

小提琴。

我最近更新了@Stewie 提到的 wiki 页面，以始终推荐这种方法。

于 2013-03-13T19:05:47.317 回答