Angular JS: набор областей действия ng-click не работает в ng-if

Сегодня я обнаружил ошибку в angularjs:

Когда вы пытаетесь установить значение области непосредственно в ng-клике, оно не работает, когда ваш ng-click находится в ng-if, который проверяет одно и то же значение области → 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>

Чтобы решить эту проблему, вы должны создать функцию области...

Если у кого-то есть объяснение этой проблемы, я был бы рад понять это!

спасибо:)

Ответ 1

Я не думаю, что это ошибка. Вы просто создаете свойства и запутываете области в представлении.

Обновлен 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 создает новую область.

Ответ 2

Это не ошибка, я думаю, что "ng-if" создает свою собственную область, поэтому, когда вы это делаете: "step = 3", вы создаете и назначаете эту переменную в отдельной области, чем ваш контроллер

<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>

Я думаю, что это то, что происходит, если кто-нибудь может подтвердить, что это будет здорово!

Ответ 3

ng-if создает свою собственную область, которая может усложнить ситуацию.

Изменение ng-if на ng-show должно решить проблему.