ng-if意外行为

时间:2015-02-20 13:10:06

标签: javascript jquery html angularjs

我的jsp中有以下行

<div data-ng-if="data.length>1">
 <div data-ng-include="'moreThanOne.html'"></div>
</div>
<div data-ng-if="data.length==1">
    <div data-ng-controller="initiatePaymentCtrl" data-ng-include="'one.html'"></div>
</div>
<div data-ng-if="show">
    <div data-ng-controller="initiatePaymentCtrl" data-ng-include="'one.html'"></div>
</div>

和Js文件如下

    $scope.initiateEvent = function(issuerId) {
        $scope.show=false;
        myService.setIssuerId(issuerId);
        $scope.show=true;
    };

moreThanOone.html如下

<html>
<body>
<div class="row">
                    <div class="col-md-12">Please review your plan selection and
                        click "Apply" to start your application.</div>
                </div>
<table class="table table-format table-bordered">
<thead>
    <tr>
        <th></th>
        <th width="50%">Plan Name</th>
        <th colspan="2">Premium</th>
    </tr>
</thead>
<tbody>
    <tr data-ng-repeat="x in data">
        <td><img src="" alt="" class="plan-logo"></td>
        <td><strong><a href="">{{x.planName}}</a></strong></td>
        <td><a href="" data-ng-click="initiateEvent(x.issuerId)">{{x.amount}}</a></td>
        <td class="text-right"><button class="btn btn-primary"
                type="button" data-ng-click="initiateEvent(x.issuerId)">Make
                Event</button></td>
    </tr>

</tbody>
</table>
</body>
</html>

因为我的morethanOne.html有一个ng-repeat和onclick的按钮或链接,它应该去获取数据并渲染one.html因此我将show设为false然后设置发行者ID并再次使其成为真实

  

所以预期的行为就是点击它应该隐藏的按钮   ng-if div然后再将它再次显示

2 个答案:

答案 0 :(得分:0)

$范围更改不是立即的,它只发生在$ digest循环内,因此angular不会发现你更改show的值直到你的函数返回之后,你可以通过调用$apply <使角度看到它/ p>

查看文档:{​​{3}}和$digest

答案 1 :(得分:0)

尝试在div中添加ng-model,如

<div ng-model="data" data-ng-if="data.length>1"> <div data-ng-include="'moreThanOne.html'"></div></div>

实际上这里发生的是角度在一段时间后运行$ digest循环。所以你需要为实时绑定放置ng-model。

希望这有帮助