Javascript AngularJs“；控制器为；语法澄清？_Javascript_Angularjs

Javascript AngularJs“；控制器为；语法澄清？

javascript angularjs

Javascript AngularJs“；控制器为；语法澄清？,javascript,angularjs,Javascript,Angularjs,我来自angularJS，认为控制器为xxx 语法InvoiceController as invoice告诉Angular实例化控制器，并将其保存在当前范围可视化：好的，我的控制器中不会有参数$scope，控制器中的代码会更干净但是我必须在视图中指定另一个别名所以到现在为止我可以做到： <input type="number" ng-model="qty" /> ....controller('InvoiceController', function($scop

我来自angularJS，认为

控制器为xxx

语法

InvoiceController as invoice

告诉Angular实例化控制器，并将其保存在当前范围

可视化：

好的，我的控制器中不会有参数

$scope

，控制器中的代码会更干净

但是

我必须在视图中指定另一个别名

所以到现在为止我可以做到：

<input type="number" ng-model="qty"  />

....controller('InvoiceController', function($scope) {
   // do something with $scope.qty <--notice


..控制器（'InvoiceController'，功能（$scope）{
//使用$scope.qty做点什么我相信当你有嵌套的作用域时，一个特别的优势是显而易见的。现在，属性引用的确切作用域就完全清楚了。
关于它有几点
有些人不喜欢$scope
语法（别问我为什么）。他们说他们可以使用这个
。这是他们的目标之一
明确财产的来源也是非常有用的
您可以嵌套控制器，在读取html时，每个属性的位置都非常清楚
您还可以避免一些点规则问题
例如，有两个控制器，都具有相同的名称“name”，您可以执行以下操作：
<body ng-controller="ParentCtrl">
    <input ng-model="name" /> {{name}}

    <div ng-controller="ChildCtrl">
        <input ng-model="name" /> {{name}} - {{$parent.name}}
    </div>
</body>

同样的例子，但读起来要清楚得多



我看到的控制器as
语法的主要优点是，您可以将控制器作为类来使用，而不仅仅是一些$scope装饰函数，并利用继承性。我经常遇到这样的情况，即有一个功能与许多控制器非常相似，最明显的做法是使用cr创建一个BaseController
类并从中继承
尽管有$scope Inheritance部分解决了这个问题，但有些人更喜欢用面向对象的方式编写代码，在我看来，这使代码更易于推理和测试
这里有一个小提琴来演示：
在我读到的内容中，$scope将在Angular 2.0中删除，或者至少我们如何看待$scope的使用。随着2.0版本的临近，开始使用controller可能会更好
视频链接以获得更多讨论。
我发现主要的优点是更直观的api，因为方法/属性直接与控制器实例关联，而不是范围对象。基本上，使用旧方法，控制器只是用于构建范围对象的装饰
以下是有关此的更多信息：

使用$scope对象创建控制器与使用控制器作为语法和虚拟机之间的区别
使用$scope对象创建控制器
通常，我们使用$scope对象创建控制器，如下清单所示：
myApp.controller("AddController", function ($scope) {



    $scope.number1;

    $scope.number2;

    $scope.result;

    $scope.add = function () {

        $scope.result = $scope.number1 + $scope.number2;

    }

});

<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>

myApp.controller("ParentController", function ($scope) {



    $scope.name = "DJ";

    $scope.age = 32;

});

myApp.controller("ChildController", function ($scope) {



    $scope.age = 22;

    $scope.country = "India";



});

<div ng-controller="ParentController">



            <h2>Name :{{name}} </h2>

            <h3>Age:{{age}}</h3>



             <div ng-controller="ChildController">

                    <h2>Parent Name :{{name}} </h2>

                    <h3>Parent Age:{{$parent.age}}</h3>

                    <h3>Child Age:{{age}}</h3>

                    <h3>Country:{{country}}</h3>

             </div>

        </div>

myApp.controller("ParentVMController", function () {

    var vm = this;

    vm.name = "DJ";

    vm.age = 32;

});

myApp.controller("ChildVMController", function () {

    var vm = this;

    vm.age = 22;

    vm.country = "India";



});

<div ng-controller="ParentVMController as parent">



            <h2>Name :{{parent.name}} </h2>

            <h3>Age:{{parent.age}}</h3>



            <div ng-controller="ChildVMController as child">

                <h2>Parent Name :{{parent.name}} </h2>

                <h3>Parent Age:{{parent.age}}</h3>

                <h3>Child Age:{{child.age}}</h3>

                <h3>Country:{{child.country}}</h3>

            </div>

 </div>

在上面，我们使用$scope对象控制器和视图创建了具有三个变量和一个行为的AddController，它们相互通信。$scope对象用于将数据和行为传递给视图。它将视图和控制器粘合在一起
基本上，$scope对象执行以下任务：
将数据从控制器传递到视图
将行为从控制器传递到视图
将控制器和视图粘在一起
当视图更改时，$scope对象将被修改，而当$scope对象的属性更改时，视图将被修改
我们将属性附加到$scope对象以将数据和行为传递给视图。在控制器中使用$scope对象之前，我们需要将其作为依赖项传递到控制器函数中
使用“控制器作为”语法和vm
我们可以使用controller作为语法和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，然后附加属性和行为。在视图中，我们可以使用控制器作为语法访问AddVmController。如下所示：
myApp.controller("AddController", function ($scope) {



    $scope.number1;

    $scope.number2;

    $scope.result;

    $scope.add = function () {

        $scope.result = $scope.number1 + $scope.number2;

    }

});

<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>

myApp.controller("ParentController", function ($scope) {



    $scope.name = "DJ";

    $scope.age = 32;

});

myApp.controller("ChildController", function ($scope) {



    $scope.age = 22;

    $scope.country = "India";



});

<div ng-controller="ParentController">



            <h2>Name :{{name}} </h2>

            <h3>Age:{{age}}</h3>



             <div ng-controller="ChildController">

                    <h2>Parent Name :{{name}} </h2>

                    <h3>Parent Age:{{$parent.age}}</h3>

                    <h3>Child Age:{{age}}</h3>

                    <h3>Country:{{country}}</h3>

             </div>

        </div>

myApp.controller("ParentVMController", function () {

    var vm = this;

    vm.name = "DJ";

    vm.age = 32;

});

myApp.controller("ChildVMController", function () {

    var vm = this;

    vm.age = 22;

    vm.country = "India";



});

<div ng-controller="ParentVMController as parent">



            <h2>Name :{{parent.name}} </h2>

            <h3>Age:{{parent.age}}</h3>



            <div ng-controller="ChildVMController as child">

                <h2>Parent Name :{{parent.name}} </h2>

                <h3>Parent Age:{{parent.age}}</h3>

                <h3>Child Age:{{child.age}}</h3>

                <h3>Country:{{child.country}}</h3>

            </div>

 </div>

属性“age”位于两个控制器内，在视图中，这两个控制器可以嵌套，如下表所示：
myApp.controller("AddController", function ($scope) {



    $scope.number1;

    $scope.number2;

    $scope.result;

    $scope.add = function () {

        $scope.result = $scope.number1 + $scope.number2;

    }

});

<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>

myApp.controller("ParentController", function ($scope) {



    $scope.name = "DJ";

    $scope.age = 32;

});

myApp.controller("ChildController", function ($scope) {



    $scope.age = 22;

    $scope.country = "India";



});

<div ng-controller="ParentController">



            <h2>Name :{{name}} </h2>

            <h3>Age:{{age}}</h3>



             <div ng-controller="ChildController">

                    <h2>Parent Name :{{name}} </h2>

                    <h3>Parent Age:{{$parent.age}}</h3>

                    <h3>Child Age:{{age}}</h3>

                    <h3>Country:{{country}}</h3>

             </div>

        </div>

myApp.controller("ParentVMController", function () {

    var vm = this;

    vm.name = "DJ";

    vm.age = 32;

});

myApp.controller("ChildVMController", function () {

    var vm = this;

    vm.age = 22;

    vm.country = "India";



});

<div ng-controller="ParentVMController as parent">



            <h2>Name :{{parent.name}} </h2>

            <h3>Age:{{parent.age}}</h3>



            <div ng-controller="ChildVMController as child">

                <h2>Parent Name :{{parent.name}} </h2>

                <h3>Parent Age:{{parent.age}}</h3>

                <h3>Child Age:{{child.age}}</h3>

                <h3>Country:{{child.country}}</h3>

            </div>

 </div>

在视图上，这两个控制器可以嵌套，如下所示：
myApp.controller("AddController", function ($scope) {



    $scope.number1;

    $scope.number2;

    $scope.result;

    $scope.add = function () {

        $scope.result = $scope.number1 + $scope.number2;

    }

});

<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>

myApp.controller("ParentController", function ($scope) {



    $scope.name = "DJ";

    $scope.age = 32;

});

myApp.controller("ChildController", function ($scope) {



    $scope.age = 22;

    $scope.country = "India";



});

<div ng-controller="ParentController">



            <h2>Name :{{name}} </h2>

            <h3>Age:{{age}}</h3>



             <div ng-controller="ChildController">

                    <h2>Parent Name :{{name}} </h2>

                    <h3>Parent Age:{{$parent.age}}</h3>

                    <h3>Child Age:{{age}}</h3>

                    <h3>Country:{{country}}</h3>

             </div>

        </div>

myApp.controller("ParentVMController", function () {

    var vm = this;

    vm.name = "DJ";

    vm.age = 32;

});

myApp.controller("ChildVMController", function () {

    var vm = this;

    vm.age = 22;

    vm.country = "India";



});

<div ng-controller="ParentVMController as parent">



            <h2>Name :{{parent.name}} </h2>

            <h3>Age:{{parent.age}}</h3>



            <div ng-controller="ChildVMController as child">

                <h2>Parent Name :{{parent.name}} </h2>

                <h3>Parent Age:{{parent.age}}</h3>

                <h3>Child Age:{{child.age}}</h3>

                <h3>Country:{{child.country}}</h3>

            </div>

 </div>


名称：{{parent.Name}
年龄：{{parent.Age}
父名称：{{Parent.Name}
家长年龄：{{Parent.Age}
儿童年龄：{{Child.Age}
国家：{child.Country}

在controller as语法中，我们有更多可读的代码，并且可以使用父控制器的别名而不是$parent语法来访问父属性
在结束本文之前，我会说，无论是将控制器用作语法还是$scope对象，这完全是您的选择。这两者都没有巨大的优点或缺点，只是，考虑到上的嵌套控制器之间的明确分离，您可以控制上下文中的控制器作为语法更容易使用视图。
这段视频解释得很好。我认为它用于HTML.Clarity中更干净的代码。我不介意在控制器中使用$scope.x和This.x，但在我看来，绑定到{{invoice.x}告诉我的不仅仅是{x}（imho）。另外，我想知道这是否解决了我在angular中听说的一个问题，其中控制器中的非对象有问题（因此things.x可以，但x会导致问题）@mattbroberts来回答你的最后一个评论-你提到的非对象问题与其说是一个角度问题，不如说是一个javascript原型继承的事实。有一个很好的解释，解释了为什么它发生在角度（以及为什么controller作为