0

I'm trying to build a website which has the following flow. Index.html -> content.html(partial rendered by ng-view) -> wizard.html (sub-view nested inside content and rendered by using 'ng-include').

The idea is, when a user is visiting content.html he has a wizard link, by clicking this link it triggers two things:

  1. url changed to #/sub/wizard
  2. Animation wrapped inside directive is activated causes the wizard to slowly slide in from top of the screen to the middle.

My problem is that when a user clicks the wizard link what happens is that only the url changes to #/sub/wizard. Only a second click on the link triggers the animation to work.

I need to understand how to make url change and the animation to work in one click.

My Plunk

How does it looks:

1 2

index.html:

  <body>
    <header>This is header</header>
    <div class="content" ng-view=""></div>
  </body>

content.html:

<div>
  <h1>This is Content brought to you by ngView</h1>
  <br>
  <a href="#/sub/wizard" started-animation>Open Wizard</a>
  <ng-include src="'wizard.html'"></ng-include>
</div>

wizard.html:

<div class="started_background">
    <section class="started_box">
        This is Wizard
    </section>
</div>

My code:

var webApp = angular.module('webApp', []);

//router logic
webApp.config(['$routeProvider', function($routeProvider) {
  $routeProvider.
    when('/', {
        templateUrl: 'content.html',
        controller: 'MainCtrl'
    })
    .when('/sub/wizard', {
        templateUrl: 'content.html',
        controller: 'WizCtrl'
    })
    .otherwise({redirectTo: '/'});
}]);

//controllers
webApp.controller ('MainCtrl', function ($scope, $routeParams) {

});

webApp.controller ('WizCtrl', function ($scope, $routeParams) {

});


//directive
webApp.directive('startedAnimation', function() {

  return {
    restrict: 'A',
    link: function(scope, elem) {
        elem.on('click', function() {
            angular.element('.started_background').addClass('sticky');
            angular.element('.started_background').show().animate({opacity: '0.7'}, 1500, function () {
                angular.element(this).css({opacity:'1',
                    backgroundColor:'rgba(0,0,0,0.7)'
                });
                angular.element('.started_box').addClass('sticky');
                angular.element('.buttons_container').css({marginLeft: '280px'});
                angular.element('.started_box').show().animate({top: '20%'}, 1500);
            });
        });
    }
  };
});
4

2 回答 2

0

删除网址，使其看起来像这样：

<a href="" started-animation>Open Wizard</a>
于 2013-11-14T18:40:24.310 回答
0

好的找到了方法，添加function调用onload解决了问题 Plunk

我所要做的就是添加到模板控制器：

webApp.controller ('WizCtrl', function ($scope, $routeParams) {
  $scope.blah = function() {
                    angular.element('.started_background').addClass('sticky');
                angular.element('.started_background').show().animate({opacity: '0.7'}, 1500, function () {
                    angular.element(this).css({opacity:'1',
                        backgroundColor:'rgba(0,0,0,0.7)'
                    });
                    angular.element('.started_box').addClass('sticky');
                    angular.element('.buttons_container').css({marginLeft: '280px'});
                    angular.element('.started_box').show().animate({top: '20%'}, 1500);
                });
  }
});

并使用onload：

<ng-include onload="blah()" src="'wizard.html'"></ng-include>
于 2013-11-14T22:16:16.817 回答