Question

今天，我在angularjs中看到了一个错误：

当您尝试直接在ng-click中设置范围值时，当ng-click处于ng-if时，如果测试相同的范围值，则它不起作用 - ＆gt; http://jsfiddle.net/9j2TL/26/

angular.module('test', [])
.controller('testCtrl', function($scope) {
    $scope.step = 1;

    $scope.setStep = function(step) {
         $scope.step = step;  
    };
});

<div ng-app="test">
<div ng-controller="testCtrl">
    <ul class="timeline">
        <li>
            <div class="block-submit">
                <button class="btn btn-primary btn-lg" ng-click="step = 2">Without ngif block</button>
            </div>
        </li>

        <li ng-if="step > 1">
            <div class="block-submit">
                <button class="btn btn-primary btn-lg" ng-click="step = 3">with ngif block</button>
            </div>
        </li>

        <li ng-if="step > 1">
            <div class="block-submit">
                <button class="btn btn-primary btn-lg" ng-click="setStep(3)">With ngif block and scope function</button>
            </div>
        </li>
    </ul>
    <p>
        step value : {{ step }}
    </p>
</div>
</div>

要解决这个问题，你应该创建一个范围函数......

如果有人对这个问题有解释，我会很乐意理解它！

thx：）

Answer 1

我不认为这是一个错误。您只是在视图中自动创建属性和混淆范围。

Updated Fiddler

这确实有效：

<li ng-if="step > 1">
    <div class="block-submit">
        <button class="btn btn-primary btn-lg" ng-click="$parent.step = 3">with ngif block</button>
    </div>
</li>

这种情况正在发生，因为self内的ng-if正在创建一个新范围。

Answer 2

这不是一个bug，我认为“ng-if”创建了一个自己的范围，所以当你在这里：“step = 3”时，你创建并在一个独立的范围内分配这个变量而不是你的控制器< / p>

<li ng-if="step > 1">
     <div class="block-submit">
                <button class="btn btn-primary btn-lg" ng-click="step = 3">with ngif block</button>
     </div>
</li>

在这里你仍然在一个单独的范围内但是当你调用一个函数时，可能angular会在你的范围内寻找这个函数，但是当angular找不到它时，它会在你的父范围内寻找函数，并且当找到它时，它将分配给你的步骤父范围变量，这就是为什么它在这里工作而不是在你上面的代码中。

<li ng-if="step > 1">
       <div class="block-submit">
                <button class="btn btn-primary btn-lg" ng-click="setStep(3)">With ngif block and scope function</button>
       </div>
</li>

我认为这是正在发生的事情，如果有人能证实它会很棒！

Answer 3

ng-if创建自己的范围，这可能会使事情变得复杂。

更改ng-if到ng-show可以解决问题。

Angular JS：ng-click范围设置在ng-if中不起作用

3 个答案: