2016-05-22 23 views
0

共通のサービスプロパティにオブジェクトを設定し、別の部分的なビューをロードするディレクティブ(関連コードのみ追加)を使用しています。 2番目のページコントローラから、以前に設定したオブジェクトを取得してUIに表示する必要があります。問題は、console.log()が期待値を与えても、UIにデータが表示されないことです。これは実行命令に関連していますか?AngularJSディレクティブで関数を呼び出す際の問題

指令:

movieBank.directive('movieSummary', function(commonServices){ 
    return{ 
     restrict : 'E', 
     template : '<input type="button" value="Detail" class="btn btn-primary button" ng-click="go();">', 
     scope : { 
      movie : '@' 
     }, 
     link: function(scope, elem, attrs){ 
      scope.go = function(){ 
       console.log('clicked ' +scope.movie); // gives correct values 
       commonServices.setMovie(scope.movie); 
       commonServices.changeLocation('/movieDetail'); 
      };    
     } 
    } 
}); 

第2ページconotroller:

movieBank.controller('movieDetailController', function($scope, commonServices){ 
    $scope.movie = commonServices.getMovie(); 
    console.log('got ' + $scope.movie); // gives correct values 
}); 

サービス:

movieBank.service('commonServices', function(){ 
    var movies = []; 
    var movie = {}; 
    return { 
     getMovie : function() { 
      return movie; 
     }, 
     setMovie : function(m){ 
      movie = m; 
     } 
    }; 
}); 

ページ:

<header class="panel-heading"> 
    <span class="title">{{movie.Title}}</span> 
    <div star-rating rating-value="movie.Rating"></div> 
</header> 
<p class="panel-body"> 
    {{movie.Description}} 
</p> 
<div class="panel-body"> 
    Directed By : {{movie.Director}}</br> 
    Release Year : {{movie.ReleaseYear}}</br> 
    Language : {{movie.Language}} 
</div> 
+0

put共通サービスgetMovie機能 – AlainIb

+0

このように呼び出すと、非同期呼び出し 'commonServices.getMovie()。then(function(res){$ scope.movi​​e = res})' – AlainIb

+0

が呼び出されます。 'movieDetailController'は' $ scope.movi​​e'? – Sajal

答えて

0

コントローラー機能を以下のように隔離されたスコープに渡すことで、別の解決策が見つかりました。誰かが利益を得るようにこれを共有する。関数を受け入れるように指令を改変

(テンプレートの変化がNGクリックし、スコープではない)

movieBank.directive('movieSummary', function(){ 
    return{ 
     restrict : 'E', 
     template : <input type="button" value="Detail" class="btn btn-primary button" ng-click="details({m : movie});">', 
     scope : { 
      details : '&' 
     } 
    } 
}); 

<movie_Summary details="goToMovieDetail(movie)"></movieSummary> 

指令がされたコントローラをディレクティブを使用するときにコントローラ機能を渡し使用中

movieBank.controller('movieListController', function($scope, commonServices){ 

    $scope.goToAddMovie = function(){ 
     commonServices.changeLocation('/add'); 
    } 

    $scope.goToMovieDetail = function(movie){ 
     commonServices.setMovie(movie); 
     commonServices.changeLocation('/movieDetail'); 
    } 
}); 
関連する問題