角度依存性の問題

Question

HTMLファイル：

<div class="header" ng-controller='HomeCtrl as homeCtrl'> 
    <div class="panel-header container"> 
     <h1>UkrBook</h1> 
     <ul class="nav nav-tabs navbar-right"> 
     <li ng-class="{active: homeCtrl.isSelected(1)}"><a href ng-click="homeCtrl.selectTab(1, 'home')">Головна</a></li> 
     <li ng-hide="" ng-class="{active: homeCtrl.isSelected(2)}"><a href ng-click="homeCtrl.selectTab(2, 'login')">Увійдіть</a></li> 
     <li ng-class="{active: homeCtrl.isSelected(3)}"><a href ng-click="homeCtrl.selectTab(3, 'register')">Реєстрація</a></li> 
     <li ng-class="{active: homeCtrl.isSelected(4)}"><a href ng-click="homeCtrl.selectTab(4, 'about')">Про нас</a></li> 
     <li ng-class="{active: homeCtrl.isSelected(5)}"><a href ng-click="homeCtrl.selectTab(5, 'profile')">Профіль</a></li> 
     <li ng-class="{active: homeCtrl.isSelected(6)}"><a href ng-click="homeCtrl.selectTab(6, 'home', Auth.logout())">Вийти</a></li> 
     </ul> 
    </div> 
    </div> 

コントローラーピース：

.controller('HomeCtrl', function($state, Auth) { 
    var homeCtrl = this; 
    homeCtrl.tab = 1; 
    homeCtrl.logout = Auth.logout; 

    homeCtrl.selectTab = function(setTab, state, callback) { 
     homeCtrl.tab = setTab; 
     $state.go(state).then(callback), 
     function(error) { 
      console.log(error); 
     }; 

    }; 

認証サービス：

.factory('Auth', function($firebaseAuth, FirebaseUrl, $state) { 
    var ref = new Firebase(FirebaseUrl); 
    var Auth = $firebaseAuth(ref); 

    Auth.logout = function(){ 
     ref.unauth().then(function(){ 
     console.log('Logged out'); 
     $state.go('home'); 
     }, function(error){ 
     authCtrl.error = error; 
     }); 
    }; 

    return Auth; 

問題は以下の通りです：HTMLファイルからAuth.logout方法がすることはできません私はHomeCtrlをコントローラとして使用していますが、DI Auth 工場。 だから、それを明確にするために、これは動作しません。

ng-click="homeCtrl.selectTab(6, 'home', Auth.logout())"

私はHomeCtrlにhomeCtrl.logout = Auth.logout;を追加して、私のHTMLファイルにhomeCtrl.logoutを呼び出す必要があります。

誰かに説明してもらえますか？私はそうすることができないのですが、サービスを注入する適切な方法ですか？また、私はこれに関する例をいくつかの良い記事に感謝します。ありがとう。

Answer 1

ビューでは、$ scopeを介してコントローラデータにしかアクセスできません。サービスメソッドにアクセスすることはできません。

注射サービスの方法は正しいです。 $の範囲についての良いドキュメントについて

、angularjs公式ドキュメントを参照してください。https://docs.angularjs.org/guide/scopeを、

とDIの良い説明のため、以下を参照してください。https://github.com/angular/angular.js/wiki/Understanding-Dependency-Injection

Answer 2

お使いのコントローラに「認証」の工場を注入することになりますがあなたのコントローラ内で呼び出すことができますが、それはビューで利用可能にはなりません。あなたが取ったステップ、homeCtrl.logout = Auth.logoutは、Auth.logout関数をビューに公開します。

Answer 3

だけ

<li ng-class="{active: homeCtrl.isSelected(6)}"><a href ng-click="homeCtrl.selectTab(6, 'home', homeCtrl.logout())">Вийти</a></li> 

とコントローラ内のことで

<li ng-class="{active: homeCtrl.isSelected(6)}"><a href ng-click="homeCtrl.selectTab(6, 'home', Auth.logout())">Вийти</a></li> 

を交換してください。

homeCtrl.logout = function() { Auth.logout() }; 

希望します。

Answer 4

の代わりに：

homeCtrl.logout = Auth.logout; 

は行います

homeCtrl.logout = function() { Auth.logout() }; 

あなたのコントローラに直接このようにそれをバインドするときは、Authコンストラクタの内部閉鎖にコンテキストを失っています。