2

新しい「controller as」構文を使用しようとして、Coffeescript と AngularJS をいじっています。さまざまな試行と Google の検索にもかかわらず、動作させることができません。html のコントローラー参照で、コントローラーの Coffeescript クラスが見つかりません。

私は何か間違ったことをしている、または物事を誤解しているだけだと思いますが、誰かが実際の例を持っていれば、それは非常に役に立ちます.

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 に変換する私のブログ記事「Writing AngularJS controllers with CoffeeScript classes」にも興味があるかもしれません。最終的に、あなたのサンプルは、最後の例で最終的に得られるものと似ています。

于 2013-10-07T19:47:53.483 に答える
0

問題はあなたの CoffeeScript ではなく、JSFiddle です。

問題は、JSFiddle が CoffeeScriptを実行している方法で、Angular が ng-app="TestApp" ディレクティブでアプリをブートストラップしようとした後、CS を処理し、作成された JavaScript を実行していることです。

@dluz はこの問題を「解決」しますが、説明はしません。

1 つの解決策は、@dluz が示唆するように、アプリを手動でブートストラップすることですが、実稼働環境ではこれを行う必要はなく、また行うべきではありません。

実稼働環境では、CoffeeScript を前処理し、JSFiddle のようにブラウザーで JavaScript にコンパイルされないことが理想的です。

于 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

これは、coffeescript、angular、および 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" )
于 2015-06-28T16:56:06.793 に答える