javascript - ng-如果不工作，ng-show 工作

Question

我有一个 html，只有当我到达页面底部时我才必须显示 AngularJS 模板(我已经实现了无限滚动)。

第一页来自服务器。所以我必须为第一页放置一个 ng-if，因为用户可能有一个带有“address/page=5”的书签，而来自服务器的第一页的 html 模板没有不必在页面中。

现在我有了特定于服务器页面的 url“地址”。

ng-if 不工作，页面是空的，但如果我使用 ng-show 一切正常。

HTML

<div ng-app="MyApp" ng-controller="MyCtrl">
    <div id="itemsGrid" ng-controller="aCtrl" infinite-scroll='item_gallery.nextPage()' infinite-scroll-distance='1' infinite-scroll-disabled=''> 

        <div ng-show="server_page()"> 
        //here the first page template

JS

myApp.controller('MyCtrl', function($scope, ItemGallery) {
    $scope.item_gallery = new ItemGallery();
    ...
}

myApp.factory('ItemGallery', function($http) {
    var ItemGallery = function() {
    ...
        ItemGallery.prototype.nextPage = function() {
        ...
        }
    return ItemGallery;
}

如果我做评论

//$scope.item_gallery = new ItemGallery();

ng-if 工作正常，页面正确显示。

当我使用时显示页面:ng-if + line commented, ng-show。

注意:

ng-if="true" 不行，不是使用的函数的问题，ng-if="server_page()" 我不想使用 ng-show。

为什么 ng-if 不起作用？那条线有什么问题？我怎样才能让它发挥作用？

Answer 1

ng-if 创建一个新的子作用域

如果拇指规则是:

不要使用范围作为模型，例如

ng-if='showStuff' //here my scope is model **INCORRECT**
ng-if='someObject.showStuff' // ** CORRECT **

在 ng-model 中使用一个对象属性，那么即使 ng-if 创建了新的子作用域，父作用域也会发生变化。

另一方面，ng-show 不会创建它在父范围内工作的新子范围。

在你的情况下请改变

$scope.item_gallery = new ItemGallery();

到

$scope.someObject.item_gallery = new ItemGallery();

那么它应该可以工作了。