Angularjs:对象更改后 ng-model 不会刷新 [英] Angularjs: ng-model doesn't refresh after object change

问题描述

我正在使用 angularjs，但我在 ng-model 更新方面遇到了一些小问题.

我有一个 $scope 对象，它在 ng-controller 之外的服务中加载了 ajax.

服务如下:

app.factory('myService', function($http) {var myService = {异步:功能(代码){var promise = $http.get(url).then(function (response) {返回 response.data;});回报承诺；}};返回我的服务；});

这有效，并且更新了 ng-controller 中的 $scope 对象.

现在我需要更新并显示 html 页面中输入文本中的值，该值具有我更新对象的 ng-model 属性，如下所示:

但是，当我执行 $scope.safeApply() 函数时(我使用 safeApply 来防止$digest already in progress error")ng-model 没有任何变化.

这是我的 ng 控制器:

function editInvitationCtrl(myService, $scope, $http) {$scope.safeApply = 函数(fn){var phase = this.$root.$$phase;if(phase == '$apply' || phase == '$digest') {if(fn && (typeof(fn) === '函数')) {fn();控制台日志(阶段)；}} 别的 {console.log("申请");this.$apply(fn);}};myService.async($scope.code).then(function(d) {$scope.invitation = d;$scope.safeApply(function(){console.log(JSON.stringify($scope.invitation));});});

我做错了什么?

更新 ng-model 和显示值需要什么?

谢谢

解决方案

看起来这里的大部分内容都是正确的，我假设您已调试看到它碰到了这一行:

$scope.invitation = d;

如果是这种情况，我唯一能看出错误的是顶部附近定义的 HTML 元素没有包含在控制器定义的区域内.

I'm working with angularjs and I have a little problem with ng-model update.

I have a $scope object that is loaded with ajax outside of the ng-controller, in a service.

The service is the following:

app.factory('myService', function($http) {
    var myService = {
            async: function(code) {
                var promise = $http.get(url).then(function (response) {
                    return response.data;
                });
                return promise;
            }
    };
    return myService;
});

This works, and my $scope object in ng-controller is updated.

Now i need to update and show the value in an input text in html page, that have the ng-model attribute of my updated object, like this:

<input type="text" name="totalInvitations"
                                ng-model="invitation.totalInvitations" required smart-float/>

But, when I perform $scope.safeApply() function (I use safeApply to prevent "$digest already in progress error") nothing change in ng-model.

Here is my ng-controller:

function editInvitationCtrl(myService, $scope, $http) {
    $scope.safeApply = function(fn) {
        var phase = this.$root.$$phase;
        if(phase == '$apply' || phase == '$digest') {
            if(fn && (typeof(fn) === 'function')) {
                fn();
                console.log(phase);
            }
        } else {
            console.log("apply");
            this.$apply(fn);
        }
    };

    myService.async($scope.code).then(function(d) {
        $scope.invitation = d;
        $scope.safeApply(function(){
            console.log(JSON.stringify($scope.invitation));
        });
    });

What I'm doing wrong?

What I need to update ng-model and show values?

Thanks

解决方案

It looks like most everything here is right, and I assume you debugged to see that it hit this line:

$scope.invitation = d;

If that's the case the only thing I could see being wrong is that the HTML element defined near the top isn't wrapped within the area the controller is defined.

<div ng-controller="editInvitationCtrl>
    <input type="text" name="totalInvitations"
     ng-model="invitation.totalInvitations" required smart-float/>
</div>

这篇关于Angularjs:对象更改后 ng-model 不会刷新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！