javascript AngularJS 输入 ng-model 未更新

AngularJS input ng-model not updating

提问by user1200387

I am trying to create a simple pagination directive with an isolated scope. For some reason when I manually change the value it gets a bit finnicky. Here is my problem:

我正在尝试创建一个具有独立范围的简单分页指令。出于某种原因，当我手动更改该值时，它会变得有点挑剔。这是我的问题：

When I page forward and backward, it works great. Awesome

当我向前和向后翻页时，效果很好。惊人的

When I enter a page into the field it works. Great

当我在字段中输入页面时，它会起作用。伟大的

However, if I enter a page into the field and then try to go forward and backward, the ng-model seems to break after I enter a page into the field. I had it working when I did not isolate my scope but I am confused as to why it would break it. Here is my code:

但是，如果我在该字段中输入一个页面，然后尝试前进和后退，则在我将一个页面输入该字段后，ng-model 似乎会中断。当我没有隔离我的范围时，我让它工作，但我很困惑为什么它会破坏它。这是我的代码：

HTML:

HTML：

<paginate go-to-page="goToPage(page)" total-pages="results.hits.pages" total-hits="results.hits.total"></paginate>

Directive:

指示：

'use strict';

angular.module('facet.directives')
    .directive('paginate', function(){
        return {
            restrict: 'E',
            template: '<div class="pull-right" ng-if="(totalPages !== undefined) && (totalPages > 0)">'+
                '<span class="left-caret hoverable" ng-click="changePage(current-1)" ng-show="current > 1"></span>&nbsp;&nbsp;Page'+
                '&nbsp;&nbsp;&nbsp;<input type="number" ng-model="current" class="pagination-input" ng-keypress="enterPage($event)"/> of'+
                '&nbsp;&nbsp;&nbsp;{{totalPages}}&nbsp;&nbsp;'+
                '<span class="right-caret hoverable" ng-click="changePage(current+1)" ng-show="current < totalPages"></span>'+
            '</div>',
            scope: {
                goToPage: '&',
                totalPages: '=',
                totalHits: '='
            },
            link: function(scope) {
                scope.current = 1;
                scope.changePage = function(page) {
                    scope.current = page;
                    window.scrollTo(0,0);
                    scope.goToPage({page:page});
                };
                scope.enterPage = function(event) {
                    if(event.keyCode == 13) {
                        scope.changePage(scope.current);
                    }
                }
            }
        }
    });

What am I doing wrong?

我究竟做错了什么？

回答by Chetan Sastry

Beware of ng-if- it creates a new scope. If you change it to just ng-show, your example would work fine. If you do want to use ng-if, create a object to store the scope variable current. Maybe something like scope.state.current?

当心ng-if- 它会创建一个新的范围。如果您将其更改为仅 ng-show，您的示例就可以正常工作。如果确实要使用ng-if，请创建一个对象来存储作用域变量current。也许像scope.state.current？

scope.state = {
    current: 1
};

To avoid confusion like this, I always keep my bindings as something.somethingand never just something.

为了避免这样的混淆，我总是保持我的绑定 assomething.something而从不只是something.

Edit: Good explanation here - http://egghead.io/lessons/angularjs-the-dot

编辑：这里有很好的解释 - http://egghead.io/lessons/angularjs-the-dot

回答by Md Hasan Ibrahim

Please always try to use model rather than using primitive types while using the ng-model because of the javascript's prototypical hierarchies.

由于 javascript 的原型层次结构，请在使用 ng-model 时始终尝试使用模型而不是使用原始类型。

angular.module('facet.directives').directive('paginate', function () {
    return {
        restrict: 'E',
        replace: true,
        template: '<div class="pull-right discovery-pagination" ng-if="(totalPages !== undefined) && (totalPages > 0)">' +
            '<span class="left-caret hoverable" ng-click="changePage(current-1)" ng-show="current > 1"></span>&nbsp;&nbsp;Page' +
            '&nbsp;&nbsp;&nbsp;<input type="number" ng-model="current.paging" class="pagination-input" ng-keypress="enterPage($event)"/> of' +
            '&nbsp;&nbsp;&nbsp;{{totalPages}}&nbsp;&nbsp;' +
            '<span class="right-caret hoverable" ng-click="changePage(current+1)" ng-show="current < totalPages"></span>' +
            '</div>',
        scope: {
            goToPage: '&',
            totalPages: '=',
            totalHits: '='
        },
        link: function(scope) {
            scope.current = {paging:1};
            scope.changePage = function(page) {
                scope.current.paging = page;
                window.scrollTo(0, 0);
                scope.goToPage({ page: page });
            };
            scope.enterPage = function(event) {
                if (event.keyCode == 13) {
                    scope.changePage(scope.current.paging);
                }
            };
        }
    };
}); 

Hope this will solve your problem :)

希望这能解决你的问题:)

For detail about this, please go through Understanding-Scopes

有关这方面的详细信息，请参阅Understanding-Scopes