Question

我正在尝试建立一个具有以下流程的网站。 Index.html - ＆gt; content.html（由ng-view部分呈现） - ＆gt; wizard.html（sub-view嵌套在内容中并使用'ng-include'呈现。）

这个想法是，当user访问content.html时，他有wizard link，点击此link会触发两件事：

url已更改为#/sub/wizard
directive内的动画被激活，导致wizard从屏幕顶部慢慢滑入中间。

我的问题是当user点击wizard link时发生的情况是只有url更改为#/sub/wizard。只需再次点击link即可触发动画。

我需要了解如何让url更改并让动画一键完成。

My Plunk

外观如何：

的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>

我的代码：

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);
            });
        });
    }
  };
});

Answer 1

删除了网址，使其显示如下：

<a href="" started-animation>Open Wizard</a>

Answer 2

好的找到了方法，将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>

AngularJS - 如何将事件传播到嵌套模板？

2 个答案: