ng-если не работает, ng-show работает

У меня есть html, в котором я должен показывать шаблон AngularJS только тогда, когда дохожу до конца страницы (я реализовал бесконечную прокрутку).

Первая страница приходит с сервера. Поэтому я должен поставить ng-if для этой первой страницы, потому что у пользователя может быть закладка с адресом/страницей = 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 + строка с комментариями, ng-show.

ПРИМЕЧАНИЕ:

ng-if="true" не работает, проблема не в используемой функции, ng-if="server_page()" не хочу использовать ng-show.

Почему ng-if не работает? В чем проблема с этой линией? Как я могу заставить его работать?


javascript angularjs angular-ng-if
person FrancescoN    schedule 01.04.2016    source источник
comment
можете ли вы добавить скрипку / плунжер к этому, пожалуйста, легче следовать   -  person Radu    schedule 01.04.2016

Ответы (2)


arrow_upward
4
arrow_downward

ng-if создает новую дочернюю область

следить за моделью в ng, если правило большого пальца:

НЕ ИСПОЛЬЗУЙТЕ ОБЛАСТЬ КАК МОДЕЛЬ, например.

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

используйте свойство объекта в ng-модели, тогда даже если ng-if создаст новую дочернюю область, родительская область будет иметь изменения.

с другой стороны, ng-show не создает новую дочернюю область, она работает в родительской области.

в вашем случае, пожалуйста, измените

$scope.item_gallery = new ItemGallery();

to

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

тогда это должно работать.

person Ankur Soni    schedule 01.04.2016
comment
у меня не работает, но я подумаю об этом, спасибо - person FrancescoN; 01.04.2016

arrow_upward
1
arrow_downward

Хорошо, у меня есть решение.

Консоль говорила мне:

Не удается прочитать свойство rel со значением null.

Это произошло потому, что первое, что я сделал внутри var ItemGallery = function(), — это изменил href для следующей страницы (следующая страница поступает из запроса ajax). href для следующей страницы расположен внутри <div> внизу текущей страницы.

Дело в том, что я меняю href для следующей страницы ДО загрузки текущей страницы.

So..

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

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

ПРИМЕЧАНИЕ: это решило мою проблему, но я нахожу это очень странным. ng-if не смог увидеть свойство 'rel' для следующего href, и я получил пустую страницу. Теперь Angular видит свойство rel, и все работает нормально.

ng-if должен работать отдельно от того, что у меня есть в html.

Я до сих пор не могу понять поведение ng-if.

person FrancescoN    schedule 01.04.2016