我试图弄清楚如何推迟默认控制器绑定，并且只在指令中应用它，一旦特定动画（自定义 - 不是 angularjs 动画）已经在带有内容的 DOM 元素上执行。我想要完成的任务就在这里，尽管它确实会立即替换内容 - 在滑动动画完成之前：http: //jsfiddle.net/scabro/hHy7s/27/
我需要能够推迟 $scope 绑定，直到页面容器完成向上滑动/动画，然后用控制器内的数据替换内容，完成后，向下滑动。
这是我目前拥有的：
HTML：
<div id="wrapper" ng-app="myApp">
<div page-animate>
<p>
<a class="btn btn-primary" href="#/" ng-click="slidePage()">Home</a>
<a class="btn btn-info" href="#/users" ng-click="slidePage()">Users</a>
<a class="btn btn-success" href="#/pages" ng-click="slidePage()">Pages</a>
</p>
<div id="relativeContainer">
<div id="content" ng-view=""></div>
</div>
</div>
</div>
CSS：
#wrapper {
text-align:center;
padding:30px 0;
}
#relativeContainer {
text-align:left;
position: relative;
width: 500px;
height: 800px;
min-height: 800px;
margin: 0 auto;
overflow: hidden;
}
#content {
position: absolute;
top: 0;
left: 0;
}
JS：
var myApp = angular.module('myApp', []);
myApp.directive('pageAnimate', function() {
return {
restrict: 'A',
scope: { },
link: function (scope, elem, attrs) {
scope.slidePage = function() {
var thisContainer = $('#content');
var thisHeight = thisContainer.outerHeight();
thisContainer.animate({ top : '-' + thisHeight + 'px'}, { duration : 300, complete : function() {
thisContainer.css({ top : '-999999em' });
var thisNewHeight = thisContainer.outerHeight();
$('#relativeContainer').animate({ height : thisNewHeight + 'px' }, { duration : 200, complete : function() {
thisContainer.css({ top : '-' + thisNewHeight + 'px' }).animate({ top : 0 }, { duration : 300 });
}});
}});
};
}
}
});
myApp.config(function($routeProvider) {
$routeProvider
.when('/',
{
controller: 'HomeController',
template: '<h1>{{ heading }}</h1><p>{{ content }}</p>'
}
)
.when('/users',
{
controller: 'UserController',
template: '<h1>{{ heading }}</h1><p>{{ content }}</p>'
}
)
.when('/pages',
{
controller: 'PageController',
template: '<h1>{{ heading }}</h1><p>{{ content }}</p>'
}
)
.otherwise(
{
redirectTo: '/'
}
)
});
myApp.controller('HomeController', function($scope) {
$scope.heading = 'Home page';
$scope.content = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate';
});
myApp.controller('UserController', function($scope) {
$scope.heading = 'Users';
$scope.content = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.';
});
myApp.controller('PageController', function($scope) {
$scope.heading = 'Pages';
$scope.content = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.';
});