Question

我的AngularJS应用程序中有一个使用ui-router的登录路径和页面。在我的login.html部分加载ui-view我有一个登录页面，其中包含绑定到credentials.username和credentials.password的用户名和密码输入。如果我想在我的LoginCtrl中访问这些凭据，我会得到未定义的＆＃39;用户名。错误。

app.js：

var myApp = angular.module('myApp', ['ui.router']);

myApp.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider.state('login', {
       url: '/login',
       templateUrl: '/partials/login.html',
       controller: 'loginCtrl'
    });
});

loginCtrl.js：

myApp.controller('loginCtrl', function($rootScope, $scope) {
    $scope.credentials.username = 'Test';
});

在我的partials / login.html中，我有一个带有2个输入的简单登录表单：

<input type='text' name='username' ng-model='credentials.username' placeholder='Username...' autoFocus>
<input type='password' name='password' ng-model='credentials.password' placeholder='Password...'>

其中autoFocus是自动复制用户名字段的自定义指令。表单显示正常，但我仍然无法在我的控制器中访问我的绑定。

我做错了什么？

Answer 1

您收到“未定义用户名”错误的原因是$scope.credentials未定义，并且您尝试将值分配给$scope.credentials.username。

使这项工作的方法是首先定义它：

$scope.credentials = {};
$scope.credentials.username = "someDefaultUsername";

绑定可以正常工作 - 事实上，由于原型范围继承的常见错误（但不是重点），它是推荐的方式：

<input ng-model="credentials.password" type="password">

偏离主题：带有驼峰情况的指令，如autoFocus，需要在HTML中非规范化为带连字符的名称，否则Angular的编译器无法找到它。

<input ng-model="credentials.username" auto-focus>

访问范围与ui-router绑定

1 个答案: