Question

什么是'controller as'语法以及它与控制器创建的$ scope对象方法有什么不同？

我已经完成了这个

AngularJs "controller as" syntax - clarification?

Answer 1

我想你想知道这个＆＃39;这个＆＃39;和＆＃39; $范围＆＃39;做法。我建议仔细阅读以下主题：

$scope vs this

此外，AngularJS还有一个style guide（虽然是自以为是的）探索这些和其他概念。

Answer 2

最后，我得到了我正在寻找的确切答案

在AngularJS 1.2中，引入了“控制器为”语法，使控制器代码创建更具可读性。

通常我们使用$ scope对象创建一个控制器，如下面的清单所示：

myApp.controller("AddController", function ($scope) {
    $scope.numb1;
    $scope.numb2;
    $scope.result;
    $scope.add = function () {
        $scope.result = $scope.numb1 + $scope.numb2;
    }
});

上面我们使用$ scope对象控制器和视图创建具有三个变量和一个行为的AddController，它们相互通信。 $ scope对象用于将数据和行为传递给视图。它将视图和控制器粘合在一起。

$ scope对象基本上执行以下任务：

将数据从控制器传递到视图
将行为从控制器传递到视图
合并控制器和视图

$ scope对象在视图更改时被修改，并且当$ scope对象的属性发生更改时视图被修改

我们可以使用控制器作为语法和vm变量重写上面的控制器，如下面的清单所示：

myApp.controller("AddVMController", function () {
    var vm = this;
    vm.number1 = undefined;
    vm.number2=undefined;
    vm.result =undefined;
vm.add = function () {
     vm.result = vm.number1 + vm.number2;
 }

}）;

基本上我们将它分配给变量vm，然后将属性和行为附加到该变量。在视图中，我们可以使用controller作为语法访问AddVmController。这显示在下面的列表中：

<div ng-controller="AddVMController as vm">

            <input ng-model="vm.number1" type="number" />

            <input ng-model="vm.number2" type="number" />

            <button class="btn btn-default" ng-click="vm.add()">Add</button>

            <h3>{{vm.result}}</h3>

  </div>

以下是使用控制器作为语法的一些步骤：

创建一个没有$ scope对象的控制器。
将其分配给局部变量。我首选变量名为vm，您可以选择您选择的任何名称。
将数据和行为附加到vm变量。
在视图上，使用控制器作为语法为控制器提供别名。
您可以为别名指定任何名称。除非我不使用嵌套控制器，否则我更喜欢使用vm。

在控制器中作为语法，我们有更多可读代码，可以使用父控制器的别名来访问父属性，而不是使用$ parent语法。

我将通过说明您是否想要将控制器用作语法或$ scope对象来完全是您的选择。两者都没有巨大的优势或劣势，只要控制器作为您对上下文具有控制权的语法就更容易使用，因为视图上的嵌套控制器有明显的分离。

在Angular JS中，$ scope对象创建控制器的方法？

2 个答案: