Question

我无法解释（可能是我失明了！）为什么我无法在以下代码中使用$scope从ng-model获取价值：

var appModule = angular.module('publicApp',[]);


appModule.controller("changePasswordController",
	function($scope, $location, mainService) {
		
		$scope.sendChangePassword = function(){

			alert('password: ' + $scope.password + '\n' + 
					'password_rpt: ' + $scope.password_rpt + '\n' + 
					'user: ' + $scope.user + '\n' + 
					'token: ' + $scope.token + '\n' 
					);
		}
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script>

<body ng-app="publicApp" style="padding: 50px">
    <div class="row-fluid">
        <form name="form" novalidate="novalidate">
            <span ng-controller="changePasswordController">
                <input type="text" name="user" id="user" ng-model="user" value="xxxxxxxx.yyyyyyyyyyy@mail.com"
                       style="display: none;"/>
                
                <input type="hidden" name="token" id="token" ng-model="token"
                       value="eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE0NTU3MTg2NjEsInVzZXJJZCI6ImZyYW5jZXNjby5kaXBhc3F1YW50b25pb0BnbWFpbC5jb20iLCJyb2xlcyI6WyJub25lIl19.Uzw2GuPhxagfeEESL9WF3RAC7upZFudJpag6Jjl2KQk"/>
                
                <div class="input-group input-sm">
                    <input class="form-control" type="password" required id="password" name="password" ng-model="password"
                           placeholder="inserisci password"/>
                </div>
                <div class="input-group input-sm">
                    <input type="password" class="form-control" id="password_rpt" name="password_rpt"
                           ng-model="password_rpt" password-match="password" required placeholder="ripeti password"/>
                </div>
                <div>
                    <input type="button"
                           class="btn btn-primary btn-default" value="Change Password"
                           ng-click="sendChangePassword()"/>
                </div>
            </span>
        </form>
    </div>
</body>

在我运行的代码中，我只能获得$scope.password值，其余变量未定义！

这是警报打印：

Answer 1

您的模块未以正确的方式创建。尝试更改此内容：

var appModule = angular.module('publicApp');

进入这个：

var appModule = angular.module('publicApp', []);

Answer 2

您需要在控制器中初始化如下所示的默认值：

＆＃13;

var appModule = angular.module('publicApp', []);


appModule.controller("changePasswordController",
  function($scope, $location) {

    $scope.user = "xxxxxxxx.yyyyyyyyyyy@mail.com";
    $scope.token = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE0NTU3MTg2NjEsInVzZXJJZCI6ImZyYW5jZXNjby5kaXBhc3F1YW50b25pb0BnbWFpbC5jb20iLCJyb2xlcyI6WyJub25lIl19.Uzw2GuPhxagfeEESL9WF3RAC7upZFudJpag6Jjl2KQk";

    $scope.sendChangePassword = function() {

      alert('password: ' + $scope.password + '\n' +
        'password_rpt: ' + $scope.password_rpt + '\n' +
        'user: ' + $scope.user + '\n' +
        'token: ' + $scope.token + '\n'
      );
    }
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script>

<body ng-app="publicApp" style="padding: 50px">
    <div class="row-fluid">
        <form name="form" novalidate="novalidate">
            <span ng-controller="changePasswordController">
                <div class="input-group input-sm">
                    <input class="form-control" type="password" required id="password" name="password" ng-model="password"
                           placeholder="inserisci password"/>
                </div>
                <div class="input-group input-sm">
                    <input type="password" class="form-control" id="password_rpt" name="password_rpt"
                           ng-model="password_rpt" password-match="password" required placeholder="ripeti password"/>
                </div>
                <div>
                    <input type="button" class="btn btn-primary btn-default" value="Change Password"
                           ng-click="sendChangePassword()"/>
                </div>
            </span>
        </form>
    </div>
</body>

＆＃13;

如果服务器以HTML格式生成并呈现user和token，那么您应该避免使用它。在Angular中使用ng-model和value属性是常见的错误。

如果您必须初始化token＆amp;的价值。 user，然后您应该在head部分中将它们渲染为全局变量，而不是在隐藏的输入字段中分配它们，而不是像这样：

<head>
    <script>
         window.globalData = {
               user: "xxxxxxxx.yyyyyyyyyyy@mail.com",
               token: "your-long-token"
         };
    </script>
</head>

现在，使用$window（window对象的Angular包装器在控制器中读取这些变量：

$scope.user = $window.globalData.user;
$scope.token = $window.globalData.token;

角度模型不绑定数据

2 个答案: