Question

我对AngularJS中的范围值和赋值有一个简单的问题。这可能听起来有点傻，但我很好奇。

假设我使用的是controllerAs语法，而我的控制器实例是ctrl，我会说，就像带有这样输入的表单：

<form name="ctrl.form">
 <input type="text" ng-model="ctrl.firstName" />
</form>

为什么我可以在我的控制器中执行此操作：

if(this.form.$valid) {
    //code...
}

但不是这样：

var form = this.form;

if(form.$valid) {
    //code
}

第一个示例有效，但第二个示例返回undefined。我在这里错过了一些简单的变量赋值吗？由于this.form包含值，为什么不将其分配给form？

谢谢！

Answer 1

编辑：

我已经解决了这个问题 - 第二个例子返回undefined的原因是因为变量是在表单提交函数之外分配的。 IE在完整的上下文中，这是我之前未定义的整个文件：

(function () {
'use strict';

//signup controller definition
var SignupCtrl = function($http, $q, User, FormTools) {

    var firstName = this.firstName,
        lastName  = this.lastName,
        password  = this.password,
        form      = this.signupForm;        


    function submitRegistration() {

        //check if the form is valid
        if(form.$valid) {
            console.log("valid");
            var user = {
                firstName: firstName,
                lastName:  lastName,
                password:  password
            };

            User.createUser(user)
            .then(function(response) {              
                console.log('user saved!');             
            }, function(err) {              
                console.error('error, user wasn\'t saved. reason: ' + err);             
            });
        //if the form isn't valid at all
        } else {
            return false;
        }
    }


    this.submitRegistration = submitRegistration;


};


angular
    .module('signup', [])

    .config(['$stateProvider', function($stateProvider) {
        $stateProvider
            .state('signup', {
                url: '/signup',
                //path relative to index.html
                templateUrl: 'modules/signup/signup.html',
                controllerAs: 'signup',
                controller: 'SignupCtrl'
            });
    }])

    .controller('SignupCtrl', [     
        '$http', 
        '$q', 
        'User', 
        'FormTools',        
        SignupCtrl
    ]);

})();

我的表单中的表单提交正在调用submitRegistration函数：

<form ng-submit="signup.submitRegistration()" id="signup-form" name="signup.signupForm" novalidate>

我猜测在调用submit函数之前，关于表单的变量（即。this.firstName，this.lastName等）是undefined。为了解决这个问题，我只是交换了我分配变量的地方：

(function () {
'use strict';

//signup controller definition
var SignupCtrl = function($http, $q, User, FormTools) {

    function submitRegistration() {

        var firstName = this.firstName,
            lastName  = this.lastName,
            password  = this.password,
            form      = this.signupForm;

        //check if the form is valid
        if(form.$valid) {
            console.log("valid");
            var user = {
                firstName: firstName,
                lastName:  lastName,
                password:  password
            };

            User.createUser(user)
            .then(function(response) {              
                console.log('user saved!');             
            }, function(err) {              
                console.error('error, user wasn\'t saved. reason: ' + err);             
            });
        //if the form isn't valid at all
        } else {
            return false;
        }
    }


    this.cool = function() {
        console.dir(this.signupForm);
    };

    this.submitRegistration = submitRegistration;

    this.sayHello = User.sayHello;  

};


angular
    .module('signup', [])

    .config(['$stateProvider', function($stateProvider) {
        $stateProvider
            .state('signup', {
                url: '/signup',
                //path relative to index.html
                templateUrl: 'modules/signup/signup.html',
                controllerAs: 'signup',
                controller: 'SignupCtrl'
            });
    }])

    .controller('SignupCtrl', [     
        '$http', 
        '$q', 
        'User', 
        'FormTools',        
        SignupCtrl
    ]);

})();

现在变量已移入本地函数范围，它可以工作。我猜测控制器在提交表单之前无权访问这些变量，但我可能错了。

PS：如果你想知道为什么我在.controller()之外定义我的控制器函数，我发现它更容易调试，因为在异常的情况下，我将在我的堆栈跟踪中有一个命名函数而不是匿名之一。

谢谢！

AngularJS中的$ scope值

1 个答案: