Question

在使用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。我在控制台中没有任何错误，只是它什么也没做。看起来控制器是一个空对象。

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

Answer 2

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

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

Answer 3

我使用一个模式来定义我的控制器和coffeescript类，并使用controllerAs将它们附加到指令（也在coffeescript中定义），这样我就可以访问模板中的类属性和方法。我还使用控制器提供程序定义了类。这在角度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 =

BTW，在模板中我可以像这样访问我的类对象：

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

没有手动分配到$ scope，$ scope.cePageHeaderDirCtrl = {}，这是一个空对象。

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

3 个答案: