$scope 不会从表单输入中获取字符串 - AngularJS，JS答案

【问题标题】：$scope doesn't picks up string from form input - AngularJS, JS$scope 不会从表单输入中获取字符串 - AngularJS，JS
【发布时间】：2014-08-27 15:00:30
【问题描述】：

我正在尝试通过用户控制面板在 MVC（Rest 服务器）应用程序中实现更改密码功能，但由于某些奇怪的原因，我无法从表单输入中确定值的范围。

我的html表单：

<accordion-group heading="Change password" is-open="changePasswordStatus.open" style="cursor: pointer">
    <div>
        <div>
            <form class="form-horizontal" role="form">
                <form-row model="newPassword" name="New: " size="col-sm-8"></form-row>
                <form-row model="repeatedNewPassword" name="Repeat: " size="col-sm-8"></form-row>
                <form-row model="currentPassword" name="Current: " size="col-sm-8"></form-row>
                <br>
            </form>
        </div>
        <div>
        <button class="btn btn-default btn-sm" ng-click="changePassword()">Save</button>
        <button class="btn btn-warning btn-sm" ng-click="changePasswordStatus.open = !changePasswordStatus.open">Cancel</button>
    </div>
</div>
</accordion-group>

我的 formRow.html：

<div class="form-group">
    <label for="inputText3" class="col-sm-2 control-label">{{name}}</label>
    <div class="{{size}}">
        <input type="{{type}}" class="form-control" data-ng-model="model">
    </div>
</div>

我的 formRow.js：

collectionsApp.directive('formRow', function(){
    return {
        restrict: 'E',
        replace: true,
        scope: {
            model: '=',
            name: '@',
            size: '@',
            type: '@'
        },
        templateUrl: '/directives/formRow.html',
        link: function(scope, attrs, element) {

        }
    }
});

我的用户控制器：

$scope.changePassword = function() {
    if ($scope.newPassword === $scope.repeatedNewPassword) {
        userService.changePassword($scope.newPassword, $scope.currentPassword);
    } else {
            $scope.alerts.push({
                msg : 'Passwords do not match!'
            })
    }
}

当我在输入中输入值并放置断点并在调试中触发 changePassword() 时，我得到：

如果条件已通过且值为 true，因为它们都未定义。

【问题讨论】：

什么版本的 Angular ？
angularjs/1.2.19/angular.min.js
你碰巧得到这个工作了吗？
我今天早上刚到我的实习公司... :) 我已经设法确定了你所说的数据范围（我已经创建了具有 3 个字段的对象，并且在 html 中我创建了 model="object.field ”，在控制器中我调用 userService.changePassword($scope.password.new, $scope.password.current)，在调试模式下我可以看到 userService 正在尝试使用加载的输入值点击“/user/changePasword”新的和当前的，但在控制台中我得到“无法读取未定义的属性协议”。它永远不会向我的休息控制器发送请求。
@PapiTheTypecaster 如果这是相同的问题，甚至是新问题，我会建议将 plunker 放在一起帮助分类问题，但快速浏览一下我想知道您的服务是否缺少某些属性。虽然当 Angular 2.0 到来时，他们会做出很多重大更改，但如果您还没有进行 REST 调用，我建议您使用 $resource 服务。

标签： javascript angularjs rest angularjs-scope

【解决方案1】：

我相信prototypical inheritance and scope 可能就是这种情况，需要将一个对象传递到您的作用域参数中。请注意尝试更改您的父范围以使用对象并绑定到属性而不是原始值：

$scope.security = {newPassword : '', currentPassword = ''};

那么你会在你的属性中使用这样的东西：

model="security.newPassword"

或者更好的是，不要让它与模型混淆：

myapp-model="security.newPassword"

或传入整个对象

myapp-security="security"

【讨论】：

【解决方案2】：

在这个plunker template工作？

<form ...>
  <form-row model="newPassword" name="New: " size="col-sm-8" required ></form-row>
  <form-row model="repeatedNewPassword" name="Repeat: " size="col-sm-8" required ></form-row>
  <form-row model="currentPassword" name="Current: " size="col-sm-8" required ></form-row>
</form>

【讨论】：

你确定吗？ ng-model (data-ng-model) 已经绑定到模型。请再看一下 FormRow 指令......你能详细说明你为什么建议这个吗？
@PapiTheTypecaster 你说得对，它不需要 ng-model。