角度コントローラ内の共有メソッド

Question

さまざまなコントローラ間でどのように共有メソッドがあるのか​​理解しています。たとえば、http://fdietz.github.io/recipes-with-angular-js/controllers/sharing-code-between-controllers-using-services.htmlです。しかし、必ずしもすべてのコントローラ内でメソッドを宣言しなくてもメソッドを共有できるかどうかは疑問でした。だから、代わりに

...

var app = angular.module("MyApp", []); 

app.factory("UserService", function() { 
    var users = ["Peter", "Daniel", "Nina"]; 

    return { 
    all: function() { 
     return users; 
    }, 
    first: function() { 
     return users[0]; 
    } 
    }; 
}); 

app.controller("MyCtrl", function($scope, UserService) { 
    $scope.users = UserService.all(); 
}); 

app.controller("AnotherCtrl", function($scope, UserService) { 
    $scope.firstUser = UserService.first(); 
}); 

...文$scope.users = UserService.all();と$scope.users = UserService.all();せずに行うことが可能であるが、それでもビューからの使用が可能だろうか？それ以外の場合、10個の異なるコントローラーがある場合は、同じステートメントを10回繰り返す必要があります。

Answer 1

私はあなたのサービスを使用している唯一のコントローラを使用することができます。次に、新しいコントローラを使用する要素内でそのデータにアクセスする必要のある要素をラップします。以下のコントローラを考慮例えば

は、作成されて：あなたは、あなたのHTMLに単純な加算を行うことにより、任意の範囲であなたのサービスと対話するために、そのデータ（ユーザー）とのいずれかの方法を注入でき

app.controller("UsersCtrl", function(UserService) { 
    return { 
    all: UserService.all(), 
    first: UserService.first() 
    }; 
}); 

。

<div ng-controller="AnotherCtrl"> 
    <p>Hello {{firstUser}}</p> 
</div> 

を...あなたは今すぐ使用できます：

あなたが以前持っていたでしょう

<div ng-controller="UsersCtrl as users"> 
    <div ng-controller="AnotherCtrl"> 
    <p>Hello {{users.first}}</p> 
    </div> 
</div> 

そして、あなたのMyCtrlとAnotherCtrlの両方がさえUsersServiceを噴射する必要はありません。次のように彼らは単に書き換えることができます

app.controller("MyCtrl", function($scope) { 
    // ... 
}); 

app.controller("AnotherCtrl", function($scope) { 
    // ... 
}); 

---

はここにあなたの他のコントローラによって利用されるデータを提供するために、新しいUsersCtrlを再利用し、より完全な例をHTMLコンテンツです：

<div ng-controller="UsersCtrl as users"> 
    <div ng-controller="MyCtrl"> 
    <h1>Users' contact</h1> 
    <p ng-repeat="user in users.all"> 
     <a href="mailto:{{::getEmailFor(user)}}">{{::getEmailFor(user)}}</a> 
    </p> 
    </div> 
    <div ng-controller="AnotherCtrl"> 
    <h1>Users' personal information</h1> 
    <p ng-repeat="user in users.all" ng-init="colour = getFavouriteColourFor(user)"> 
     {{user}}'s favourite colour: <span class="text-{{colour}}">{{colour}}</span> 
    </p> 
    </div> 
</div> 

ほかあなたのサンプルデータに基づいて、簡単なlive working example on JSFiddleがここにあります。