1

私の状況は次のとおりです。作成済みのアプリケーションに、次のような Javascript オブジェクトがあります...

var foo = foo || {};
foo.name = "";
foo.gender = "";

foo.loadUser = function() {
    // Some other stuff here
    foo.name = "Joe";
    foo.gender = "Fella";

    $("#welcome).text("Hello " + foo.name + " you sure are a swell " + foo.gender + "!");    
}

ここで、ロジックとプレゼンテーションの混合が気に入らないと判断したため、jquery のその行を削除し、単純なデータ バインディングを使用して angular.js にテキストを更新させたいと考えています。だから私はangular.jsをロードし、この小さな行を追加しました..

<div ng-app>
<div id="welcome" ng-controller="foo">Hello {{foo.name}}! 
     You sure are a swell {{foo.gender}}!</div>

問題は、これを行うと、次のようなエラーが発生することです...

エラー: 引数 'foo' は関数ではありません。オブジェクトを取得しました

angular.js Getting Started の例を見ると、戻って foo オブジェクト全体を (他のすべてのコードと共に) 次のような形式で書き直す必要があるように見えます...

function foo($scope) {
  $scope.name = '';
  $scope.gender = '';

  $scope.loadUser = function() {
    //Other stuff here
    $scope.name = "Joe";
    $scope.gender = "Fella"            
  }

}

...うまくいくかもしれませんが (まだ試していません)、この新しい形式に合わせてすべてのコードを書き直す必要があるかどうかはわかりません。私はただの foo よりも多くのオブジェクトを持っており、実際には foo にはもっと多くのものがあります。（ちなみに、私はそれを「foo」とさえ呼んでいません！）

すべてのオブジェクトを関数として書き直さずに、データバインディングを機能させる方法はありますか?

4

2 に答える 2

4

これがあなたが探しているものかどうかはわかりませんが、次のように Angular コントローラーにある foo オブジェクトを引き続き使用できるはずです。

function Controller($scope){
    $scope.foo = foo;
    foo.loadUser();
}

例については、このフィドルを参照してください。この記事のレッスン 2 で説明されているように、オブジェクトをサービスまたはファクトリに移動することもできます。

于 2012-08-04T06:26:17.363 に答える
0

これは当たり前のように思えるかもしれませんが、試してみましたかng-controller="foo.loadUser"

マークアップ

<div id="welcome" ng-controller="foo.loadUser">Hello {{foo.name}}! 
     You sure are a swell {{foo.gender}}!</div>

角度のある

foo.loadUser = function($scope) {
    // Some other stuff here
    foo.name = "Joe";
    foo.gender = "Fella";

    $scope.foo = foo;
}

関数が $scope として受け取り、その値に対してすべての angularjs マジックを実行する限り、既存のオブジェクトを変更する必要はありません。

于 2012-08-09T20:56:23.037 に答える