Fatal编程技术网
  • angularjs/
  • Angularjs 指令中的Angular Controller和controllerAs关键字用法

Angularjs 指令中的Angular Controller和controllerAs关键字用法

angularjs

Angularjs 指令中的Angular Controller和controllerAs关键字用法,angularjs,Angularjs,学习角度，所以有些时候事情不清楚时，阅读文章的角度。在这里，我一直在理解指令中这个关键字Controller和controllerAs的用法或重要性 代码取自这里 我想知道这两个关键字在指令中的重要性，它们是controller:'SomeController'，和controllerAs:'ctrl'， 请告诉我，如果我们不使用这两个关键字controller:'SomeController'和controllerAs:'ctrl'，，那么会发生什么，或者更糟的是什么 请帮助我了解指令中此关键

学习角度，所以有些时候事情不清楚时，阅读文章的角度。在这里，我一直在理解指令中这个关键字Controller和controllerAs的用法或重要性

代码取自这里

我想知道这两个关键字在指令中的重要性，它们是
controller:'SomeController'，和controllerAs:'ctrl'，

请告诉我，如果我们不使用这两个关键字
controller:'SomeController'和controllerAs:'ctrl'，
，那么会发生什么，或者更糟的是什么

请帮助我了解指令中此关键字
controller:'SomeController'和controllerAs:'ctrl'的用法或重要性。
谢谢如果您计划引用控制器对象，您需要
控制器。你就是这样把它挂起来的


controllerAs
允许您创建一个变量，您可以使用该变量引用控制器，而不是使用
$scope

精致的答案：


<html ng-app="app">

<head></head>

<body>
    <script src="node_modules/angular/angular.js"></script>
    <script>
        var app = angular.module('app', []);
        app.directive('fooDirective', function() {
        return {
                restrict: 'A',                       
                controller: function($scope) {
                    // No 'controllerAs' is defined, so we need another way
                    //  to expose this controller's API.
                    // We can use $scope instead.
                    $scope.foo = 'Hello from foo';
                },
                template: '{{foo}}'
            };
        });

        app.directive('barDirective', function() {
           return {
               restrict: 'A',
               controller: function() {
                   // We define a 'vm' variable and set it to this instance.
                   // Note, the name 'vm' is not important here. It's not public outside this controller.
                   //   The fact that the 'controllerAs' is also called 'vm' is just a coincidence/convention.
                   // You could simply use 'this.bar' if you prefer.
                   var vm = this;
                   vm.bar = 'Hello from bar';
               },
               // This allows us to reference objects on the controller's instance by
               //   a variable called 'vm'.
               controllerAs: 'vm',
               // Now we can reference objects on the controller using the 'controllerAs' 'vm' variable.
               template: '{{vm.bar}}'
           };
        });
    </script>

    <div foo-directive></div>
    <div bar-directive></div>
</body>

</html>




var-app=angular.module（'app'，[]）；
app.directive（'foodirection'，function（）{
返回{
限制：“A”，
控制器：功能（$scope）{
//没有定义“controllerAs”，所以我们需要另一种方法
//以公开此控制器的API。
//我们可以改为使用$scope。
$scope.foo='Hello from foo'；
},
模板：“{{foo}}”
};
});
app.directive（'barDirective'，function（）{
返回{
限制：“A”，
控制器：函数（）{
//我们定义一个“vm”变量并将其设置为这个实例。
//注意，名称“vm”在这里不重要。它在此控制器之外不是公共的。
//“controllerAs”也称为“vm”，这只是一个巧合/惯例。
//如果您愿意，您可以简单地使用“this.bar”。
var vm=这个；
vm.bar='Hello from bar'；
},
//这允许我们通过以下方式引用控制器实例上的对象：
//一个名为“vm”的变量。
controllerAs:'vm'，
//现在，我们可以使用“controllerAs”“vm”变量引用控制器上的对象。
模板：“{vm.bar}”
};
});

看看这个

这是我的简单指令代码：


angular.module('app', [])

.directive('someDirective', function () {
  return {
    scope: {},
    controller: function ($scope) {
      this.name = 'Pascal';
      $scope.color = 'blue';
    },
    controllerAs: 'ctrl',
    template: '<div>name: {{ctrl.name}} and Color: {{color}}</div>'
  };
});



angular.module（'app'，[]）
.directive（'someDirective'，function（）{
返回{
作用域：{}，
控制器：功能（$scope）{
this.name='Pascal'；
$scope.color='blue'；
},
controllerAs:'ctrl'，
模板：{ctrl.name}}和颜色：{{Color}
};
});


和HTML


<body ng-app="app">
   <some-directive />
</body>






因此，如您所见，如果您需要访问针对控制器中的
this
关键字定义的某些变量，则必须使用
controllerAs
。但是，如果它是针对
$scope
对象定义的，您可以使用它的名称访问它

例如，您可以通过使用
{color}
获取变量
color
，因为它是针对
$scope
定义的，但是您必须使用
{ctrl.name}}
，因为“name”是针对
this
定义的

我不认为真的有什么区别，就像我说的

有些人不喜欢$scope语法（不要问我为什么）。他们说
他们可以用这个

此外，您还可以从他们的网站上了解到这一设计选择背后的动机

使用controller as可以清楚地知道您是哪个控制器 当多个控制器应用于一个控制器时，在模板中访问 元素

希望有帮助。

您不需要同时使用
controller
和
controllerAs
。您可以使用速记：

controller: 'SomeController as ctrl'
关系是使用您提供的实例句柄作为ctrl创建控制器的新实例并将其公开给模板

如果您正在使用嵌套的控制器，或者在视图中使用一个控制器的多个实例，这一点就很方便了

更新以回答评论

您不需要将控制器与AngularJS指令一起使用。事实上，从AngularJS 1.5开始，您可能只应该在创建
组件时使用控制器，而不是在创建
指令时使用控制器

指令和组件在概念上是相似的。在AngularJS之前，所有组件都将被定义为指令

指令在许多方面与元素（如
ng href
）或事件（如
ng click
）交互

区分组件和指令的最简单方法是组件将有一个模板


我是否可以使用directive link方法创建一个组件？

你可以，但除非你有充分的理由，否则我不会推荐它。使用控制器允许您使用面向对象的类或原型来定义模板和用户的操作行为


此外，这些控制器比指令链接功能更容易进行单元测试
 它的一个主要优点，尤其是如果您是AngularJS新手，就是它确保了子作用域之间正确的数据绑定

只需使用此代码示例，并尝试注意一些奇怪的事情：



angular
.module（'myApp'，[]）
.controller（'MainCtrl'，['$scope'，
职能（$范围）{
$scope.truthyValue=true；
$scope.foo='hello'；
}
]);


首先在第一个输入中写入一些内容。然后在第二张纸上写些东西。干得好，你已经

controller: 'SomeController as ctrl'