Question

（学习AngularJS，版本1.5.5）

我收到了以下代码

<form ng-submit="addCust.submit()" ng-controller="AddCustomerCtrl as addCust"> 
    <div> <input type="text" ng-model="addCust.cName" required/> </div> 
    <div> <input type="text" ng-model="addCust.cCity" required/> </div>
    <div> <button id="f1" type="submit" >Add Customer</button> </div>
</form>

controller.js包含以下代码

helloWorldControllers.controller('AddCustomerCtrl', ['$scope', '$location',
    function AddCustomerCtrl($scope, $location) {
        $scope.submit = function(){ console.log('AddCustomerCtrl.submit !');
        $location.path('/addedCustomer/' + $scope.cName + "/" + $scope.cCity); }; 
    }
]);

如果我避免在HTML中对控件进行别名（＆＃34; AddCustomerCtrl为addCust＆＃34;），那么每件事都可以。

我不知道我错在哪里。欢迎任何帮助。提前谢谢！

（......是的！我是AngularJS的新手）

涓

Answer 1

使用 Controller as 语法时，不要使用$scope。你的控制器应该是：

helloWorldControllers.controller('AddCustomerCtrl', ['$location',
    function AddCustomerCtrl($location) {
        this.submit = function(){ 
            console.log('AddCustomerCtrl.submit !');
            $location.path('/addedCustomer/' + this.cName + "/" + this.cCity); 
        }; 
    }
]);

请注意，如果您需要在承诺解析时访问this，则需要创建单独的局部变量，因为当承诺解析时this将不再处于上下文中。

Answer 2

尝试使用以下控制器代码：

helloWorldControllers.controller('AddCustomerCtrl', ['$scope', '$location',
     function ($scope, $location) {
        var addCust = this;
        addCust.submit = function(){
            console.log('AddCustomerCtrl.submit !');
            $location.path('/addedCustomer/' + $scope.cName + "/" + $scope.cCity);
        }; 
    }
]);

Answer 3

当您使用controllerAs时，属性将在别处引用别名。所以你的代码中应该有addCust.cName和addCust.cCity。我建议不要在控制器中注入$ scope，并从代码中删除对它的所有引用。如果您不熟悉它，那么这里普遍接受的最佳实践已在此处详细记录：https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md。

TrackVector

当控制器别名时，AngularJS 1.5.5提交不起作用

3 个答案: