2

「Coffee Script Class」と Angular JS 構造を使用する良い方法になると思われる何かをしたいと考えています。

<!doctype html>
<html ng-app>

  <head>
    <meta charset=utf-8>
    <meta name=viewport content="width=device-width, initial-scale=1">
    <title>Main Test</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/angular.min.js"></script>
    <script type="text/javascript" src="js/coffee.js"></script>
  </head>

  <body>
    <div ng-controller="MainClass" style="margin-left:10px">
      <h2>All todos: {{test()}}</h2>
    </div>
  </body>

</html>

DIV ng-controller を MainClass としてセットアップし、H2 HTML タグ内で test() メソッドをバインドしていることに注意してください。

class AngularJSController
  constructor: ($scope, $main) ->

    $scope.test = MainClass.prototype.test
    MainClass.test = MainClass.prototype.test
    $main.test = MainClass.prototype.test
    test = MainClass.prototype.test
    @test = MainClass.prototype.test

    console.log @test

class MainClass extends AngularJSController
  constructor: ($scope) ->
    super $scope, this

    setTimeout (->
        console.log test()
      ), 1000

    test();

  test: -> 'aloha!'

AngularJSController コンストラクターで、スーパー クラス メソッド TEST を MainClass スコープにセットアップするために想像したすべてのフォームを試しましたが、成功しませんでした。

Angular JSコントローラーとコンポーネントだけでクラスを操作したいので、それをやろうとしています。

私がすでに陥った問題：

  1. @test()setTimeout 内の代わりに使用しようとするとtest()、jQuery はすでにthisプロパティを一種の JQuery ウィンドウ オブジェクトに置き換えています。

    setTimeout (-> console.log @test()), 1000

  2. test()場所 this (または @ cause Coffee) が場所と同じでない場合、呼び出しの範囲が実際に何であるかはわかりません。

    test() != this.test() != @.test() # the first scope isn't the same scope of last two calls
4

6 に答える 6

8

次の構文を使用しました。

app = angular.module 'myapp', []

class MySimpleCtrl

  @$inject: ['$scope'] 
  constructor: (@scope) ->
    @scope.demo = 'demo value'
    @scope.clearText = @clearText

  clearText: =>
    @scope.demo = ""

app.controller 'MySimpleCtrl', MySimpleCtrl

angular.bootstrap document, ['myapp']

この jsFiddle を見てください: http://jsfiddle.net/jwcMA/

于 2013-08-12T18:04:49.443 に答える
0

  1. setTimeout は jQuery とはまったく関係ありませんが、setTimeout に渡される関数は実際にはグローバル (ウィンドウ) コンテキストで実行されます。太い矢印を使用して、現在のスコープに明示的にバインドします。 http://coffeescript.org/#fat_arrow

    setTimeout (=>
  console.log @test()
), 1000

  2. 申し訳ありませんが、何について質問されているのかわかりません。

于 2013-01-11T13:08:11.027 に答える
0

@malixの答えはうまくいきませんでしたが、うまくいく解決策にたどり着きました。これが私がやっている方法です：

'use strict'

class ImportsCtrl
  constructor: ($scope, Import) ->
    Import.query().then (imports) -> $scope.imports = imports

angular.module("greatDealsApp").controller "ImportsCtrl", ImportsCtrl

$scopeのプロパティに変換する不自然な例を次に示しImportsCtrlます。

'use strict'

class ImportsCtrl
  constructor: ($scope, Import) ->
    @scope = $scope
    @Import = Import
    @loadImports()

  loadImports: =>
    @Import.query().then (imports) => @scope.imports = imports

angular.module("greatDealsApp").controller "ImportsCtrl", ImportsCtrl

これが重要かどうかはわかりませんが、ng-annotateを使用しています。

于 2015-03-11T21:08:38.703 に答える
-1

それは不可能だ。AngularJS はコントローラーが関数であることを保証するため、コントローラーをオブジェクト (MainClass) として設定することはできません。

それを行うには、AngularJS をカスタマイズする必要があります。私はそれは良い考えではないと思います。

参考文献

于 2013-01-11T12:30:19.250 に答える