Question

我有一部分代码如下：

angular.module('tessicommunicationApp')
    .controller('RegisterController', function ($scope, $translate, $timeout, Auth) {
        $scope.success = null;
        $scope.error = null;
        $scope.doNotMatch = null;
        $scope.errorUserExists = null;
        $scope.registerAccount = {};
        $timeout(function (){angular.element('[ng-model="registerAccount.login"]').focus();});

我的问题很简单：我无法找到声明登录属性的位置。因为在模板中，我可以阅读：

<input type="text" class="form-control" id="login" name="login" placeholder="{{'global.form.username.placeholder' | translate}}"
                           ng-model="registerAccount.login" ng-minlength=1 ng-maxlength=50 ng-pattern="/^[a-z0-9]*$/" required>

ng-model指令绑定了我不知道声明位置的login属性。

如果您愿意，可以在路线的一部分下方：

angular.module('tessicommunicationApp')
    .config(function ($stateProvider) {
        $stateProvider
            .state('register', {
                parent: 'account',
                url: '/register',
                data: {
                    authorities: [],
                    pageTitle: 'register.title'
                },
                views: {
                    'content@': {
                        templateUrl: 'scripts/app/account/register/register.html',
                        controller: 'RegisterController'
                    }
                },

感谢您的回答。

Answer 1

AngularJS控制器使用视图（HTML）和控制器（JS）与$scope声明之间的双向数据绑定。因此，控制器$scope.registerAccount中的空对象可以与视图进行通信。

因此，如果您在input字段中输入内容，Angular将告诉控制器使用键registerAccount绑定更新login对象，以及输入的任何文本。

E.g。如果我在输入中输入“Hello World”，则会更新控制器。看看这个快速小提琴：

https://jsfiddle.net/fw920Led/1/

我很想花时间浏览AngularJS提供的Todo示例应用程序，以真正了解正在发生的事情。祝你好运！

Answer 2

您应该在html中添加{{ registerAccount }}。你可能会理解它的工作方式。

这里重要的一点是2路数据绑定工作方式有2种，javascript到html和html到javascript。这意味着当您在html输入中输入值时，您的javascript $ scope将使用登录值进行更新。

双向数据绑定是angularjs的关键特性之一，如果你想要更好地使用框架，必须要了解它。

Answer 3

login属性不必显式声明，只需在输入字段中输入内容时添加到$scope.registerAccount。

所以基本上你有

// before user input
$scope.registerAccount = {} 

// after user input "test"
$scope.registerAccount = {
    login: 'test'
}

Answer 4

好的，如果我理解得很好，就没有必要申请变量＆＃39;登录＆＃39;明确地在左侧。它是从HTML（视图）到Javascript（模型）的绑定，导致在范围级别附加到registerAccount objet的登录变量的存在。

AngularJS初学者需要代码说明

4 个答案: