使用“这个"而不是“范围"使用 AngularJS 控制器和指令 [英] Using "this" instead of "scope" with AngularJS controllers and directives

问题描述

我最近在阅读 John Papa 固执己见的AngularJS 风格指南 并注意到他的惯例在控制器上:

/* 推荐 */功能客户(){var vm = 这个；vm.name = {};vm.sendMessage = 函数 () { };}

当它在控​​制器中使用时它工作得很好，因为你可以做这样的事情(他的例子):

<div ng-controller="客户作为客户">{{ 顾客姓名 }}

然而，我更好奇它是如何与依赖于这个控制器的指令一起工作的.例如，在我的控制器上使用 $scope 我可以做这样的事情:

testModule.directive("example", function(){返回{模板:你好{{客户}}"，控制器:exampleCtrl"}});testModule.controller("exampleCtrl", exampleCtrl);函数示例Ctrl($scope){$scope.message = "显示这个";}

但是我不能使用 this.message 做到这一点:

testModule.directive("example", function(){返回{template: "Hello {{customer}}",//不起作用！控制器:exampleCtrl"}});testModule.controller("exampleCtrl", exampleCtrl);函数示例Ctrl(){var vm = 这个；vm.message = "显示这个";}

所以我的问题是， 在指令中如何工作?我试过使用:

{{customer}}{{this.customer}}{{exampleCtrl.customer}}

没有任何效果.如您所见，我在黑暗中拍摄，并没有真正理解差异以及如何在 Angular 中使用 this 而不是 scope.此外，由于这不是约定俗成的，我一直无法找到很多与之相关的资源，因为它比 Angular 更能理解 JS.

感谢任何帮助！

解决方案

使用此样式时，指令应根据 指令 文档.

你的指令最终看起来像:

testModule.directive("example", function() {返回 {模板:你好{{controller.customer}}"，控制器:exampleCtrl"，控制器为:控制器"};});

I was recently reading John Papa's opinionated AngularJS style guide and noticed his convention on controllers:

/* recommended */
function Customer () {
  var vm = this;
  vm.name = {};
  vm.sendMessage = function () { };
}

When this is used in a controller it works just fine as you can do something like this (his example):

<!-- recommended -->
<div ng-controller="Customer as customer">
    {{ customer.name }}
</div>

However I am more curious in how it works with directives that rely on this controller. For example, using $scope on my controller I can do something like this:

testModule.directive("example", function(){
    return{
        template: "Hello {{customer}}",
        controller: "exampleCtrl"
    }
});
testModule.controller("exampleCtrl", exampleCtrl);
function exampleCtrl($scope){
    $scope.message = "Display this";
}

But I can't do this using this.message:

testModule.directive("example", function(){
    return{
        template: "Hello {{customer}}", //Doesn't work!
        controller: "exampleCtrl"
    }
});
testModule.controller("exampleCtrl", exampleCtrl);
function exampleCtrl(){
    var vm = this;
    vm.message = "Display this";
}

So my question is, how would this work in the directive? I've tried using:

{{customer}}
{{this.customer}}
{{exampleCtrl.customer}}

And none work. As you can see, I'm shooting in the dark and not really understanding the differences and how I could use this in Angular instead of scope. Also, as this isn't the convention, I haven't been able to find many resources speaking to it, since it's more a JS understanding thing than Angular.

Any help is appreciated!

解决方案

When using this style, directives should use the controllerAs property in their return object per the Directive documentation.

Your directive would end up looking like:

testModule.directive("example", function() {
    return {
        template: "Hello {{controller.customer}}",
        controller: "exampleCtrl",
        controllerAs: "controller"
    };
});

这篇关于使用“这个"而不是“范围"使用 AngularJS 控制器和指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！