ng-如果不工作，ng-show 工作 [英] ng-if not working, ng-show works

问题描述

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

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

现在我有了网址地址"，特定于来自服务器的页面.

ng-if 不起作用，页面为空，但如果我使用 ng-show 一切正常.

HTML

<div id="itemsGrid" ng-controller="aCtrl" infinite-scroll='item_gallery.nextPage()' infinite-scroll-distance='1' infinite-scroll-disabled=''><div ng-show="server_page()">//这里是第一页模板

JS

myApp.controller('MyCtrl', function($scope, ItemGallery) {$scope.item_gallery = new ItemGallery();...}myApp.factory('ItemGallery', function($http) {var ItemGallery = 函数(){...ItemGallery.prototype.nextPage = function() {...}返回项目库；}

如果我发表评论

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

ng-如果工作正常，页面显示正确.

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

注意:

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

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

解决方案

好的，我有解决方案.

控制台说我:

<块引用>

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

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

内.

关键是我要在加载当前页面之前更改下一页的 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 的行为.

I have an html where I must show AngularJS template only when I reach the bottom of the page (I've implemented infinite scrolling).

The first page comes from the server. So I've to put an ng-if for that first page, because the user could have a bookmark with "address/page=5", and the html template for the first page from the server doesn't have to be in the page.

Now I have the url "address", specific for the page from the server.

ng-if doesn't work, the page is empty, but if I use ng-show it all works fine.

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;
}

If I do comment

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

ng-if works fine, the page is correctly showed.

The page is showed when I use: ng-if + line commented, ng-show.

NOTE:

ng-if="true" doesn't work, it's not a problem of the function used, ng-if="server_page()" I don't want to use ng-show.

Why ng-if doesn't work? What's the problem with that line? How can I make it working?

解决方案

Ok I've the solution.

Console was saying me:

Cannot read property 'rel' of null.

This happened because the first thing I was doing inside var ItemGallery = function(), was to change the href for the next page (next page comes from ajax request). The href for the next page is located within a <div> in the bottom of the current page.

The point is that I'm changing the href for the next page, BEFORE the current page has been loaded.

So..

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

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

NOTE: this has solved my problem, but I find it very strange. ng-if wasn't able to see the 'rel' property for the next href and I got the empty page. Now Angular can see the 'rel' property and it all works fine.

ng-if should work apart of what I have in the html.

I still can't understand the behavior of ng-if.

这篇关于ng-如果不工作，ng-show 工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！