预先填充的表单数据在服务中未定义答案

【问题标题】：pre-populated form data is undefined in service预先填充的表单数据在服务中未定义
【发布时间】：2015-05-27 14:15:11
【问题描述】：

jQuery:

$("#inputParentName").val(response.name);

HTML/Angular 表单：

<form role="form" ng-submit="addParentService.addParent()">
    <div class="form-group">
        <label for="inputParentName">Name</label><input class="form-control" id="inputParentName" value="" type="text" ng-model="addParentService.inputParentName" />
    </div>
     ...
    <button class="btn btn-default" type="submit">Submit</button>
</form>

以下代码运行时在输入框中正确显示我的名字。

但是，在我的服务中，当我尝试查看 inputParentName 的值时，我得到一个未定义的错误。但是，当我在 inputParentName 的文本框中输入内容时，输入的值会显示出来。

控制器代码：

myapp.controller('AddParentController', function ($scope, addParentService) {
    $scope.addParentService = addParentService;
});

服务代码：

myapp.service('addParentService', function () {
    var vm = this;
    vm.parent = [];

    vm.addParent = function () {
    alert(vm.inputParentName);
    };
});

我可以做些什么不同的事情，以便我可以注册预加载的数据，以便我的服务识别数据？

这只是我试图开始工作的基本代码。我意识到它不是纯粹的 AngularJS。我只是想看看我怎样才能让它发挥作用。在一切正常后，我将使用指令进行重构。

【问题讨论】：

第 1 名你为什么包含 angularjs 的 jquery？
@pankajparkar - 这只是我试图开始工作的基本代码。我意识到它不是纯粹的 AngularJS。我只是想看看我怎样才能让它发挥作用。在一切正常后，我将使用指令进行重构。
从 Angular 的角度来看，您的 jQuery 调用似乎正在“在雷达下”更改字段的值，这就是为什么未检测到此更改的原因。您可以在控制器中预填充该字段。
其实在 AngularJS 中 input 是一个指令：docs.angularjs.org/api/ng/input 如果你想预先填充 input，你初始化模型。所以，设置 addParentService.inputParentName 的值
不会。控制器是模型和视图之间的粘合剂。所以这就是你在模型上初始化值的地方。该服务适用于跨领域关注的事物——您希望在应用程序的许多地方使用的事物，而不是特定于特定视图、控制器或模型的事物。因此，您的服务可用于从后端检索数据并与多个控制器共享。

标签： angularjs

【解决方案1】：

如果您希望在视图显示时初始值是“某物”，您可以（技术上）使用 ng-init，尽管docs 明确告诉我们不要这样做。

ngInit 唯一合适的用途是为特殊属性设置别名 ngRepeat，如下面的演示所示。 除了这种情况，您还应该使用控制器而不是 ngInit 来初始化作用域上的值。

但如果你只是想测试一些东西，ng-init 看起来像：

<input ng-model="test.val" ng-init="test.val='something'" />

不过，首选方法是将值添加到控制器 $scope。

<input ng-model="test.val" />

然后在你的控制器中：

myapp.controller('MyCtrl', function ($scope) {

   $scope.test = {
    val: 'something'
   }

});

【讨论】：

我的想法有所不同，但仍然有很多您的意见。如果您想采用我的做法并将其添加到您的答案中，我会将您的答案标记为答案（并删除我的答案）。
很高兴您找到了解决方案。保留你的答案。想要挑战？摆脱对jQuery的依赖。使用内置的 $http 服务为 Facebook 创建您自己的服务，并在您的服务范围内填充您的值！
这是我使用 AngularJS 的下一个挑战。我应该只搜索 $http 服务吗？
这就是我要开始的地方。我假设您正在使用一些后端来实际连接到 FB，然后您一直在使用 jQuery 的 ajax 方法从后端检索值。 Angular 的 $http 服务的行为很像 jQuery 的 $.ajax 方法，因此更换该代码应该相当简单。稍后，您可能想查看如何创建自己的自定义服务（注入 $http）以检索该信息，以便您可以在应用程序中的多个控制器之间共享它。在某些时候，您会想要查看 ngResource 并直接连接到 FB API。

【解决方案2】：

@jme11 和 This Answer 让我深入了解了我想出如何让它发挥作用的以下方式：

Facebook 逻辑的 jQuery 代码：

    $("#inputParentName").val(response.name);
    $("#inputParentEmail").val(response.email);
    $("#inputParentBirthday").val(response.birthday);

    angular.element(document.getElementById('inputParentName')).scope().$apply();
    angular.element($('#inputParentName')).scope().setName(response.name);
    angular.element($('#inputParentEmail')).scope().setEmail(response.email);
    angular.element($('#inputParentBirthday')).scope().setBirthday(response.birthday);

我的控制器代码：

$scope.setName = function (val) {
    addParentService.inputParentName = val;
}

$scope.setEmail = function (val) {
    addParentService.inputParentEmail = val;
}

$scope.setBirthday = function (val) {
    addParentService.inputParentBirthday = val;
}

服务代码：

vm.addParent = function () {
    alert(vm.inputParentName);
    alert(vm.inputParentBirthday);
    alert(vm.inputParentEmail);
    alert(vm.inputParentCellPhone);
    alert(vm.inputParentCarrier);
};

现在，当我添加我的 Parent 时，从 Facebook 预填充的值可以在我的服务代码中使用。

再次感谢 jme11 帮助我解决这个问题。

【讨论】：