2016-05-22 4 views
0

Я использую директиву ниже (добавлены только связанные коды), где он устанавливает объект в общем сервисе и загружает другое частичное представление. Из второго контроллера страницы должен быть извлечен ранее установленный объект и показан в пользовательском интерфейсе. Проблема заключается в том, что данные не отображаются в пользовательском интерфейсе, даже console.log() дает ожидаемые значения. Связано ли это с порядком исполнения?Проблема при вызове функции в директиве 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'); 
      };    
     } 
    } 
}); 

Вторая страница 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

положить commonServices getMovie function – AlainIb

+0

вы должны вызвать его так, чтобы обрабатывать асинхронный вызов 'commonServices.getMovie(). Then (function (res) {$ scope.movie = res})' – AlainIb

+0

у вас есть 'movieDetailController', назначенный странице, на которой вы печатаете' $ scope.movie'? – Sajal

ответ

0

Нашли альтернативное решение, передав функцию контроллера в изолированную область действия, как показано ниже. Разделите это так, чтобы кто-то еще получил преимущество.

Модифицированный директиву, чтобы принять функцию (не изменение шаблона нг кнопкой мыши и область применения)

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'); 
    } 
}); 
Смежные вопросы