Question

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

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

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

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注释，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

好的，我有解决方案。

控制台说我：

无法读取null的属性'rel'。

这是因为我在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的行为。

ng-if not working，ng-show有效

2 个答案: