of-if 不工作，of-show 作品

Question

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

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

现在我有 url "address"，特定于来自服务器的页面。

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 中的模型

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

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();

那么应该可以了。

Answer 2

好的，我找到了解决方案。

控制台在说我：

Cannot read property 'rel' of null.

发生这种情况是因为我在 var ItemGallery = function() 中做的第一件事是更改下一页的 href（下一页来自 ajax 请求）。下一页的 href 位于当前页面底部的 <div> 内。

要点是，在加载当前页面之前，我正在更改下一页的 href。

所以..

window.onload = function () {
                this.nextPageQueryString = document.getElementById("nextPage").rel;

                this.next_href = this.domain_url + this.nextPageQueryString;
            };

注意：这已经解决了我的问题，但我觉得很奇怪。 ng-if 无法看到下一个 href 的 'rel' 属性，我得到了空白页。现在 Angular 可以看到 'rel' 属性并且一切正常。

ng-if 应该与我在 html.

中的工作分开

我还是不能理解ng-if的行为。

of-if 不工作，of-show 作品

ng-if not working, ng-show works

javascript

angularjs

angular-ng-if