在角度中使用ng-if时,视图不会更新

时间:2016-06-10 20:19:04

标签: javascript angularjs

我有这样的按钮:

<div>
    <ul>                            
        <li ng-if="role === 'artist'"><a data-ng-click="search.status = 'PORTFOLIO'" href="">PORTFOLIO</a></li>
        <li ><a data-ng-click="Data1 = true;Data2 = false; search.status = ''" href="">ALL PROJECTS</a></li>
        <li ><a data-ng-click="Data1 = false;Data2 = true;" href="">NOTIFICATIONS</a></li>
        <li ><a data-ng-click="Data1 = true;Data2 = false; search.status = 'COMPLETED PROJECTS'" href="">COMPLETED PROJECTS</a></li>
        <li  ng-if="role === 'admin'" ><a data-ng-click="Data1 = true;Data2 = false; search.status = 'OPEN'" href="">SAVED PROJECTS</a></li>
        <li  ng-if="role === 'admin'" ><a data-ng-click="Data1 = true;Data2 = false; search.status = 'IN PROGRESS'" href="">RUNNING PROJECTS</a></li>                           
        <li  ng-if="role === 'admin'" ><a data-ng-click="Data1 = true;Data2 = false; search.status = 'ASSETS'" href="">ASSETS</a></li>
        <li  ng-if="role === 'admin'" ><a data-ng-click="Data1 = true;Data2 = false; search.status = 'JOB REQUESTS'" href="">JOB REQUESTS</a></li>
    </ul>
</div>

我在最后四个按钮中使用ng-if="role=='admin'"检查角色的位置。

问题是当我单击第3个按钮(通知)然后单击任何定义了ng-if的按钮时,视图不会填充。

当我从通知按钮(第3个按钮)导航到所有项目按钮(第1个按钮),然后导航到任何其他具有ng的按钮 - 如果它正常工作。

此外,如果我删除ng - 如果它工作正常。为什么这只发生在特定按钮上?

ng-repeat根据按钮点击填充数据:

<div ng-if="workOrdersList.length > 0">
    <ul ng-show="Data1">                                   
        <li dir-paginate="wd in workOrdersList | filter: search.status | filter: search.name | itemsPerPage: 10">
            <a href="">
                <h4>{{wd.name}}</h4>
            </a>
            <p>Status: {{wd.status}}</p>
        </li>
    </ul>


    <ul ng-show="Data2">
        <li>
            <div ng-show="notificationDataDashord.length">
                <h3>Notifications </h3>
                <div infinite-scroll="getPagination()">
                    <div ng-repeat="notification in notificationDataDashord" ng-class="{even: $even, odd: $odd}" >
                        <strong>{{notification.user_name}}</strong>
                        <a  href ng-click="openModal(notification.work_module_id)">{{notification.message}}</a>
                    </div><!--/row-->

                    <div ng-if="notification.image_url">
                        <a href="{{notification.image_url}}" target="_blank">
                            <img src="{{notification.image_url}}">
                        </a>
                    </div>
                </div><!--/notifications-->
            </div><!--/tabs conent-->
        </li>
    </ul>
    <dir-pagination-controls boundary-links="true" ng-show="Data1" auto-hide="true"></dir-pagination-controls>
</div>

控制器:

$scope.Data1 = true; 
$scope.Data2 = false;

1 个答案:

答案 0 :(得分:1)

我建议你尝试在你的方法中使用ng-show / ng-hide而不是ng-if。

这是一篇很好的阅读When to favor ng-if vs. ng-show/ng-hide?