1

これを行う2つの方法を見てきました。サービス/コントローラーを参照してください。

var app = angular.module('myApp', []);

app.service('user', function() {    
    this.loggedIn = false;
    this.logIn = function() { 
        this.loggedIn = true; 
    };
    this.logOut = function() {
        this.loggedIn = false;
    };
});

function Ctrl1($scope, user) {
    $scope.user = user;
}

function Ctrl2($scope, user) {
    $scope.loggedIn = user.loggedIn;

    // Proxy functions

    // This wont work because of binding:
    // $scope.logIn = user.logIn;
    // $scope.logOut = user.logOut;

    // This works
    $scope.logIn = function() {
        user.logIn();
    };
    $scope.logOut = function() {
        user.logOut(); 
    };

    // This also works:
    // $scope.logIn = user.logIn.bind(user);
    // $scope.logOut = user.logOut.bind(user);

    $scope.$watch(function() {
        return user.loggedIn;
    }, function(value) {
        $scope.loggedIn = value;
    });
}

そしてHTML：

<div ng-controller="Ctrl1">
    <h2>Ctrl1: Access the user service directly</h2>
    <div ng-show="user.loggedIn">
        Logged In
        <button ng-click="user.logOut()">Log Out</button>
    </div>
    <button ng-show="!user.loggedIn" ng-click="user.logIn()">Log In</button>    
</div>
<hr />
<div ng-controller="Ctrl2">
    <h2>Ctrl2: Proxy via the controller</h2>
    <div ng-show="loggedIn">
        Logged In
        <button ng-click="logOut()">Log Out</button>
    </div>
    <button ng-show="!loggedIn" ng-click="logIn()">Log In</button>  
</div>

ライブ: http://jsfiddle.net/h6AR4/

スコープにサービスを直接追加するのは間違っているように感じますが、結果としてよりクリーンなコントローラー コードが得られます。

すべての機能をプロキシすると、コントローラーのコードが乱雑になります。

決定的な「Angular way」はありますか?

4

1 に答える 1

1

上で概説した方法は、サービス全体を にバインドしたという意味で「サポートさ$scopeれています」 。私見ですが、サービスで定義されているすべてのメソッドをテンプレートに「覗き見」させるのは、通常は最善ではありません (もしよろしければ、コードのにおいとラベルを付けます)。

さらに、AngularJS サービスを (プロキシ メソッドなしで) 呼び出すと、アプリケーションの実装がより結合され、テストが難しくなります。とはいえ、次の場合は、よりスリムなアプローチに従うことが理にかなっている可能性があります。

  • サービス (およびコントローラー) は軽量でパススルーであり、(プロキシ メソッドを記述するための) 追加のオーバーヘッドは価値がありません。
  • テスト (さらに重要なことに、モッキング) はユース ケースにとってあまり重要ではないか、コードは他の方法で簡単に検証できます。
  • サービスは、(遅延/Promise 値ではなく) データを即座に返します。遅延値には、「読み込み」状態を処理するだけでなく、Promise の結果をアンラップする (利用可能な場合) コントローラー メソッドが必要です。

全体として、ここでは YMMV ですが、直接バインディングが「正しくない」または「許可されていない」決定的な理由はありません。

Pawel には、同じオプションを提示する優れた記事がありますが、コミュニティ間のコンセンサスは、それがオプションである一方で、このバインド方法ではめったに「正しい」オプションではないということです: https://stackoverflow.com/a/15040125/283788

于 2014-04-28T17:28:21.267 に答える