Question

我认为我有snytax或逻辑问题，但经过几个小时的调试后我至少发现了一些关于我的ng-click无法正常工作的事情。下面的示例演示ng-click在ng-repeat中没有触发。（除非你创建一个函数来解雇它）。

看看这个http://jsfiddle.net/tM56a/18/然后你知道我的问题。

HTML

<div ng-controller="apiCtrl">
    <p ng-click="show=!show">Click me I'm outside of li tags</p>

    <br />

    <ul>
        <li ng-repeat="menu in menus" >
            <a ng-click="show=true">click me, I am li tag</a>
        </li>
    </ul>

    <p ng-show="show">Show me text</p>

</div>

JS

function apiCtrl($scope) {

    $scope.menus = [
        {menu: 'page_01', url: 'page_01.html'},
        {menu: 'page_02', url: 'page_02.html'}
    ];

    $scope.test = function(menu){
        alert('test ' + menu.url)
    }
}

Answer 1

您应该使用$parent.show：

<a ng-click="$parent.show=true">click me, I am li tag</a>

问题是，ng-repeat创建了自己的范围，原型继承父范围。由于show是布尔简单类型，它使问题用于原型继承。阅读this以了解原型继承和范围问题。

Answer 2

从 AngularJS wiki

引用

范围继承通常很简单，你甚至不需要知道它正在发生......直到你尝试双向数据绑定（即表格元素，ng- model）到原始（例如，数字，字符串，布尔值）在子范围内从父范围定义。它没有像大多数人期望的那样工作。会发生什么是子范围获取其自己的属性，该属性隐藏/隐藏同名的父属性。这不是AngularJS正在做的事情 - 这就是JavaScript原型继承的工作原理。新的AngularJS开发人员通常没有意识到ng-repeat，ng-switch，ng-view和ng-include都创建了新的子范围，所以当涉及这些指令时，问题经常会出现。

问题是你使用了一个原语（boolean）。正如维基建议：

有一个＆＃39;。＆＃39;在你的模型中将确保原型继承发挥作用。所以，使用
  <input type="text" ng-model="someObj.prop1"> rather than
  <input type="text" ng-model="prop1">.

如果您确实需要/需要使用原语，则有两种解决方法：


在子范围中使用$ parent.parentScopeProperty。这将阻止子范围创建自己的属性。

在父作用域上定义一个函数，并从子作业中调用它，将原始值传递给父作用域（并非总是可行）

底线，您应该使用一个对象，例如config.show代替show，或在子范围内使用$parent.show（ngRepeat - 创建<li>）。

另请参阅第一个备选方案的 short demo 。

由于范围问题，ng-click不会在ng-repeat内触发

2 个答案: