Question

我有这个功能，

app.directive('movieDetails', MovieDetailsDirectiveFn)
   .controller('MovieRowCtrl', ['$scope', '$rootScope', MovieRowCtrlFn]);

function MovieDetailsDirectiveFn() {
  return {
    restrict: 'E',
    scope: {
      movie: '='
    },
    templateUrl: '/tpl.html',
    // template: '<div class="movie" style="background-image:url(https://image.tmdb.org/t/p/w1280{{movie.backdrop}})">{{movie.title}}</div>'
  }
}

function MovieRowCtrlFn($scope, $rootScope) {
  $scope.selectedMovie;
  $scope.rowActive = false;


  $scope.$on('movieRowActivated', ($event, dataObject) => {
    if ($scope.$id != dataObject.targetScopeId) {
      $scope.rowActive = false;
    }
  });


  $scope.updateSelectedMovie = function updateVisibleMovieIndexFn(movie) {
    $scope.selectedMovie = movie;
    $rootScope.$broadcast('movieRowActivated', {targetScopeId: $scope.$id});
    $scope.rowActive = true;
    console.log ('hello')
  }
}

这个HTML，

<div class="content" ng-repeat="movie in movieGroup" ng-init='$movieIndex = $index'>
  <a href='' ng-click='updateSelectedMovie(movie)'>{{ movie.title }}</a>
</div>

<div ng-if='rowActive'>
  <movie-details movie='selectedMovie'></movie-details>
</div>

当用户点击某个按钮时，会触发updateSelectedMovie功能，并使用新信息更新指令元素movie-details。

在这里查看plunker http://plnkr.co/edit/Ea1OtRUc1wvC4UNw1sNi?p=preview

我想要做的是在movie-details指令元素更改内容时设置fadeOut / fadeIn转换动画。我在ui-router元素上使用了ngAnimate，因为它们获得了ng-enter ng-animate类等，但这不适用于指令。

Answer 1

对于任何有同样问题的人。我通过在指令加载的模板中放置一个ui-view来“修复”它。并用它修复了一个状态。所以现在该指令创建了一个模板并进入另一个状态。然后状态将模板放在新创建的ui-view（来自指令）中，现在我可以为该元素设置动画。

在指令

1 个答案: