别名控制器时AngularJS 1.5.5提交不起作用答案

【问题标题】：AngularJS 1.5.5 submitting not working when aliasing the controller别名控制器时AngularJS 1.5.5提交不起作用
【发布时间】：2016-09-29 20:04:00
【问题描述】：

（学习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 中为控件设置别名（“AddCustomerCtrl as addCust”），一切都很好

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

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

胡安

【问题讨论】：

标签： angularjs controller submit aliasing

【解决方案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); 
        }; 
    }
]);

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

【讨论】：

我不相信这段代码会起作用，因为它会在代码执行时引用提交函数，而不是控制器。
@MikeFeltman 它可以正常工作，this simple JSFiddle 证明了这一点。
你的小提琴并没有真正表明这一点，但我添加了一点，它确实有效。仍然不建议以这种方式使用它。
@MikeFeltman Sigh...updated the JSFiddle 表明它确实有效。这是基本的东西，我确实在我原来的回答中指出，如果 OP 需要访问 this，当一个承诺解决时，还有一个额外的步骤。在控制器上调用简单函数时，您所描述的 this 问题不会发生。
是的，我们同时发帖。不过，这仍然不是最佳做法。

【解决方案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);
        }; 
    }
]);

【讨论】：

【解决方案3】：

当您使用 controllerAs 时，属性在任何地方都使用别名引用。因此，您的代码中应该有 addCust.cName 和 addCust.cCity。我建议不要将 $scope 注入到您的控制器中，并从代码中删除对它的所有引用。如果您不熟悉它，公认的最佳实践在此处有详细记录：https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md。

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

【讨论】：

由于注入不匹配，这将在$location.path 上引发错误。
是的，我在您发表评论之前将其编辑了。