将 ng-model 重新绑定到服务对象

Question

我有一个视图，其中包含一个首先连接空服务对象的 ng-model。由于该对象为 null，即使该值可用，ng-model 也不会绑定到该值。有什么办法可以将 ng-model 重新绑定到可用值。我不想使用 ng-change 因为 ng-change 只是触发单向绑定。这是 plunker。

http://plnkr.co/edit/4jILPHJy2P6ueIaJSlNl?p=preview

在 plunker 中，formController 中有一个服务 'myService'。在 html 中，我将 ng-model 与服务 myService.name 中的变量绑定。

<input type="text" class="form-control" name="name" ng-model="myService.name">

我想要做的是当我单击按钮时，因为服务名称已初始化，所以我可以将 ng-model 与服务变量绑定。

Answer 1

在您的原始代码中，myService 不在 ng 控制器的 $scope 中。因此，即使您使用 myService.name 绑定输入，ng-model 也不是您创建的 myService。

您必须如下所示将 myService 分配给 $scope 才能使您的代码正常工作。

var formApp = angular.module('formApp', [])


.service('myService',function(){
   this.name='hello';
})

.controller('formController', function($scope,myService) {

    // we will store our form data in this object
    $scope.formData = {};
    $scope.myService = myService;
    $scope.click=function(){
      myService.name='test';
    }

});

但我建议您在 $scope 中创建一个局部变量并将服务中的值赋给它，而不是获取整个服务对象。这就是 ng 服务提供某种 'service' 的全部目的。

Answer 2

另一种选择是，在您的服务中使用 Init 函数并将您的范围传递到您的服务中。然后在控制器顶部调用 init 函数。在您的服务中类似：

Init: function(scope){
      scope.myService = this;
}

然后在你的控制器中：

.controller('formController', function($scope,myService) {    
     myService.Init($scope);    
});

现在您应该可以使用了：

<input type="text" class="form-control" name="name" ng-model="myService.name">

将 ng-model 重新绑定到服务对象

Rebind ng-model to service object

javascript

angularjs

angular-ngmodel