28

私はこのHTMLを持っています：

<p>Hello {{name}}</p>

コントローラーは次のとおりです。

function myCtrl(scope, service) {
    scope.name = service.getUsername(); // service.getUsername() return "World!"
}
myCtrl.$inject = ['$scope', 'originalService'];

サービスは正常に機能するため、ここにコードを貼り付けません...この場合、結果は「Hello world！」になります。HTMLを次のように変更しました。

<p>Hello {{service.getUsername()}}</p>

しかし、これは機能しません。

コントローラを変更しました：

function myCtrl(scope, service) {
    scope.ser = service;
}
myCtrl.$inject = ['$scope', 'originalService'];

次にHTML

<p>Hello {{ser.getUsername();}}</p>

これはうまくいきます！

だから私の質問は：

これがサービスの関数をHTMLで直接使用する唯一の方法ですか、それとも何かが足りませんか？

4

3 に答える 3

61

AngularJSテンプレートは、スコープで使用可能な関数のみを呼び出すことができます。したがって、どのようなアプローチを取る場合でも、スコープ上で関数を使用する必要があります。

サービスの関数をテンプレートから直接呼び出すことができるようにする場合は、いくつかのオプションがあります。

あなたが試したもの-つまり、スコープでサービス全体を公開します：

$scope.service = service;

次に、テンプレートで：

<p>Hello {{service.getUsername();}}</p>

これはコントローラーのワンライナーであり、すべてのサービスメソッドをスコープで使用できるようにして、テンプレートで使用できるようにします。

メソッドを1つずつ公開する

何が公開されるかを正確に制御するには：

$scope.getUsername = service.getUsername;

次に、テンプレートで：

<p>Hello {{getUsername();}}</p>

これには、より多くの作業を公開する方法が必要ですが、公開する内容をきめ細かく制御できます。

プロキシ方法を公開する：

$scope.getMyUsername = function() {
   //pre/post processing if needed 
   return service.getUsername();
};

これらのメソッドのいずれかを使用するか、それらを組み合わせて組み合わせることができますが、1日の終わりに、関数はスコープ上で終了する必要があります（直接またはスコープ上に公開された別のオブジェクトを介して）。

于 2013-02-23T11:39:31.543 に答える
14

それを行う別の方法：

$rootScopeでサービスを公開します。

$rootScope.service = service;

次に、テンプレートで：

<p>Hello {{service.getUsername();}}</p>

これはapp.runで実行でき、アプリのすべてのビューでサービスを利用できます。この方法は、認証サービスに使用できます。

于 2014-08-16T12:27:39.757 に答える
1

$ scope内でサービスを公開する別の方法は、サービスメソッド/データオブジェクトに関数ポインターを追加することです。

scope.serviceData = service.data;
// Or
scope.getServiceData = service.getData;

ビュー内で、括弧を使用してビューを呼び出すことができます。

<input ng-model="serviceData().key" />
// Or
<input ng-model="getServiceData().key" />
// Or
{{getServiceData().key}}

私は個人的にこのアプローチが好きで、複数のビューを同じデータと同期させるために現在使用しています。ここで説明されているように、いくつかの問題が発生します： AngularJS。サービスからの適切な双方向データバインディングに関するベストプラクティス

多くのデータにさらすことに関して、私は現在このようなことをしようとしています。

// Within your view.
{{getServiceDataByKey('key')}}

// In your controller.
scope.getServiceDataByKey = service.getServiceDataByKey;

// In your service.
getServiceDataByKey : function (key) {
   return dataObject[key];
}

私がこれを行っている理由は、コントローラーを可能な限りクリーンに保ち、すべてのデータを1か所にまとめたいからです。また、サービス内のほとんどのデータを公開する必要があります。

于 2013-08-19T19:03:47.880 に答える