2

我正在使用 Coffeescript 和 AngularJS，尝试使用新的“控制器作为”语法。尽管进行了各种尝试和搜索谷歌，但我无法让它工作 - 我的 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)

谢谢

4

4 回答 4

1

JS Fiddle是罪魁祸首。当我在JS Bin中尝试时，您的语法是正确的并且工作正常。与不受此问题困扰的 JS Bin 相比，JS Fiddle 似乎正在处理一些乱序。

查看有效的 JS Bin 示例：http: //jsbin.com/akABEjI/1/edit

您可能还对我的博客文章感兴趣，该文章采用 AngularJS Todo 应用程序并将其转换为 CoffeeScript：“使用 CoffeeScript 类编写 AngularJS 控制器”。最终，您的样本与我在最后一个示例中的最终结果相似。

于 2013-10-07T19:47:53.483 回答
0

问题不在于您的 CoffeeScript，而在于 JSFiddle。

问题在于 JSFiddle 执行 CoffeeScript 的方式，它正在处理 CS 并在 Angular 尝试使用您的 ng-app="TestApp" 指令引导应用程序之后很好地执行创建的 JavaScript。

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

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

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

于 2013-10-07T19:41:35.837 回答
0

我对您的代码进行了一些更改，现在可以使用（http://jsfiddle.net/denisonluz/r5KQb/2/）

还要记住，有时在使用 JSFiddle 时使 AngularJS 工作可能有点棘手。这里有一篇关于它的好帖子。在 JSFiddle 上使用 AngularJS 和 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>
于 2013-10-07T19:33:23.933 回答
0

这是一个简单的例子，咖啡脚本、角和玉并排工作

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" )
于 2015-06-28T16:56:06.793 回答