javascript - AngularJS 中的 $scope 值

Question

我有一个关于 AngularJS 中范围值和分配的快速问题。这可能听起来有点傻，但我对此很好奇。

假设我正在使用 controllerAs 语法，并且我的 Controller 实例是 ctrl，我已经说过，有些东西，比如带有如下输入的表单:

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

为什么我可以在我的 Controller 中这样做:

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

但不是这个:

var form = this.form;

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

第一个示例有效，但第二个示例返回 undefined。我在这里遗漏了一些简单的变量赋值吗？既然 this.form 持有一个值，为什么它没有分配给 form？

谢谢!

Answer 1

编辑:

我已经解决了这个问题 - 第二个示例返回未定义的原因是因为变量是在表单提交函数之外分配的。 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>

我猜测与表单相关的变量(即 this.firstName、this.lastName 等)未定义 直到提交函数被调用。为了解决这个问题，我只是交换了分配变量的位置:

(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
    ]);

})();

既然变量被移到了局部函数作用域中，它就可以工作了。我猜测在提交表单之前 Controller 无法访问这些变量，但我的看法可能是错误的。

PS:如果你想知道为什么我在 .controller() 之外定义我的 Controller 函数，我发现它更容易调试，因为在出​​现异常的情况下，我将在我的堆栈跟踪而不是匿名的。

谢谢!