在 AngularJS 指令控制器中使用 CoffeeScript 的类答案

【问题标题】：Use CoffeeScript's class in AngularJS directive controller在 AngularJS 指令控制器中使用 CoffeeScript 的类
【发布时间】：2014-12-24 01:27:35
【问题描述】：

在使用 CoffeeScript 创建 AngularJS 指令时，我使用了这种方法：

angular
.module('MyApp', [])
.directive 'myDirective', ->
restrict: 'E'
controllerAs: 'ctrl'
controller: ->
  new class
    constructor: ->
      @value = 3

此代码适用于 Angular 1.2.14—jsbin—但不适用于 1.3.0—jsbin。我在控制台中没有任何错误，只是它什么都不做。看来控制器是一个空对象。

【问题讨论】：

这对我来说效果很好：stackoverflow.com/questions/27172394/…

标签： angularjs angularjs-directive coffeescript

【解决方案1】：

我在这个帖子中回答了几乎相同的问题：AngularJS + Coffeescript - 'Hello World' directive not working。我喜欢将我的 Angular 对象保留为适当的 CoffeeScript 类。关键是将new Directive() 包装在一个功能块内。

class MyDirective
    constructor: (myService) ->
        // Constructor stuff
        @controller = MyController
        @controllerAs = 'ctrl'
    restrict: 'E'
    replace: true
    scope:
        attributeStuff: '='
    link: (scope, element, attr) ->

angular.module('my_module').directive 'MyDirective', (myService) ->
    new MyDirective(myService)

【讨论】：

您的方法似乎无法使用controllerAs 语法。
我明白了，但我仍然不明白这样做的好处。
嗯，我喜欢将所有内容都放在类中或将所有内容放在 Angular 模块中，而不是两者的混合。而且由于我更喜欢将控制器和服务编写为类，因此我希望指令也一样。一致性为王

【解决方案2】：

我做了一些进一步的研究：似乎在 Angular 1.3.0 中，如果您使用 controllerAs Angular 将采用 controller 并在其上执行 new。所以这段代码解决了这个问题：

angular
.module('MyApp', [])
.directive 'myDirective', ->
restrict: 'E'
controllerAs: 'ctrl'
controller: class
  constructor: ->
    @value = 3

【讨论】：

【解决方案3】：

我使用一种模式来定义我的带有咖啡脚本类的控制器，并使用控制器将它们附加到指令（也在咖啡脚本中定义），这样我就可以访问模板中的类属性和方法。我还使用控制器提供程序定义了这些类。这在 angular 1.2.15 中效果很好，但是当我更新到 1.3.6 时就坏了。

经过多次调试，我意识到 Angular 不再自动将 coffeescript 类返回的对象实例放到作用域上。修复很简单：手动将实例化的类对象放在作用域上，如下所示：

myModule.directive 'cePageHeader',  ->
  restrict: 'A'
  templateUrl: 'shared/ce-page-header.tpl.html'
  replace: true
  scope: true
  controller: 'CePageHeaderDirectiveCtrl as cePageHeaderDirCtrl'

cePageHeaderDirectiveModule.controller 'CePageHeaderDirectiveCtrl',
(UserModel, $scope) ->
  $scope.cePageHeaderDirCtrl =
  new class CePageHeaderDirectiveCtrl
    constructor: ->
      @user = UserModel

    goHome: ->
      console.log "Do something to go home"

以前，函数只是返回类创建的对象。添加这一行解决了 1.3.6 的问题：

$scope.cePageHeaderDirCtrl =

顺便说一句，在模板中我可以像这样访问我的类对象：

<a class="navbar-brand" ng-click="cePageHeaderDirCtrl.goHome()">
  Go Home

如果没有手动分配给 $scope，$scope.cePageHeaderDirCtrl = {}，一个空对象。

【讨论】：