Question

我正在玩Coffeescript和AngularJS，尝试使用新的“controller as”语法。尽管尝试各种各样的尝试和搜索谷歌，我无法让它工作 - 我的HTML中的控制器参考没有找到控制器的Coffeescript类。

我怀疑我做错了什么或只是误解了事情，但如果有人有一个有效的例子，那将会非常有帮助。

这里有一个小jsfiddle显示我想要做的事情：http://jsfiddle.net/G2r4p/（这个例子中的控制器只是一个空的虚拟控制器，所以我可以测试语法）。

当我在浏览器中运行此示例时，我得到：

Error: [ng:areq] Argument 'AppController' is not a function, got undefined
at hasOwnPropertyFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.js:60:12)
at assertArg (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.js:1187:11)
at assertArgFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.js:1197:3)
at $get (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.js:5547:9)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.js:5060:34
at forEach (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.js:203:20)
at nodeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.js:5047:11)
at compositeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.js:4607:15)
at compositeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.js:4610:13)
at publicLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.js:4516:30)

由于

Answer 1

JS Fiddle是罪魁祸首。您的语法是正确的，并且在我JS Bin中尝试时效果正常。看起来JS Fiddle正在处理一些乱序的东西，相比之下JS Bin并没有遇到这个问题。

查看正在运行的JS Bin示例：http://jsbin.com/akABEjI/1/edit

您可能也对我的博客文章感兴趣，该文章采用了AngularJS Todo应用并将其转换为CoffeeScript："Writing AngularJS controllers with CoffeeScript classes."最终您的示例与我在最后一个示例中的结果类似。

Answer 2

我已经更改了一些代码，现在正在运行（http://jsfiddle.net/denisonluz/r5KQb/2/）

另外请记住，使用JSFiddle时，有时使AngularJS工作有点棘手。关于它的帖子here很好。在JSFiddle上使用AngularJS和CoffeScript时，必须使用手动引导程序。

<强> COFFESCRIPT

testApp = angular.module 'testApp', []

testApp.controller 'AppController', ($scope) ->
    $scope.items = [{title: "My test App", description: 'Some Text Here'}]

angular.bootstrap document, ["testApp"]

<强> HTML

<div ng-controller='AppController'>
<h3>one plus two is {{1 + 2}}</h3>
  <ul ng-repeat='item in items'>
    <li>{{item.title}}</li>
    <li>{{item.description}}</li>
   </ul>
</div>

Answer 3

问题不在于你的CoffeeScript，而是JSFiddle。

问题在于JSFiddle正在使用CoffeeScript，它正在处理CS并在Angular尝试使用你的ng-app =“TestApp”指令引导应用程序后很好地执行创建的JavaScript。 < / p>

虽然@dluz“解决”了这个问题，但它没有解释它。

一种解决方案是手动引导您的应用，正如@dluz建议的那样，但您不必也不必在生产环境中执行此操作。

理想情况下，在生产环境中，您将预处理CoffeeScript，并且它永远不会在浏览器中编译为JavaScript，就像在JSFiddle中一样。

Answer 4

这是一个简单的例子，coffeescript，angular and jade并排工作

doctype html
html(lang="en")
    head
        meta(charset="utf-8")
        title Test
        script(src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.js')
        script(src='http://coffeescript.org/extras/coffee-script.js')
        style.
            input { width: 200px }

        script(type='text/coffeescript').
            app = angular.module('App', [])
            app.controller 'TestController', ($scope)->
                $scope.name = 'Angular 1.4 with Jade with coffee'
            angular.bootstrap document, ["App"]

    body
        div
            div(ng-controller="TestController")
                h2 {{name}}
                hr
                input(type="text" ng-model="name" )

无法在JSFiddle中使用ng-app加载CoffeeScript AngularJS模块

4 个答案:

问题不在于你的CoffeeScript，而是JSFiddle。