[英]Angular animate parent div of ng-view using element insde ng-view
是否可以使用ng-view内$ state上的指令,使ng-view外的div(背景色)动画化?
ng-view具有用于布线的CSS动画。
如果我不为div设置动画,则ng-view动画效果很好,但是..如果我将动画类添加到div(bgId)中,则路由动画不会触发。
这是html的示例:(作为示例添加的按钮-通常会在模板页面中,例如home.html / login.html)
<body ng-app="app" ng-controller="MainCtrl">
<div id="bgId" class="{{colorVal}}">
<ion-nav-view animation="slide-left-right">
</ion-nav-view>
</div>
<button swapcolour="changeColour()" data-nxtpage="1">change colour</button>
</body>
这由指令(swapcolour)控制,该指令从按钮attr获取nxtpage值并更新MainCtrl中的colorVal。
//MainCtrl.js
.controller('MainCtrl', ['$scope', '$state', function($scope, $state) {
$scope.colorVal = 'redBg';
}])
//Directive.js
.directive('swapcolour', function ($rootScope, $state) {
var pageArr = [{home:'redBg'},{login:'blueBg'}];
return function (scope, element, attrs) {
var nextPageNum = attrs.nxtpage;
var obj = pageArr[nextPageNum];
var item = Object.keys(obj);
var objItem = obj[item];
element.bind('click', function () {
$state.transitionTo(item[0]);
$rootScope.$$childHead.colorVal = objItem;
});
}
}])
我不知道为什么失败。 有任何想法吗?? 我是新手。 (试图安装一个塞子,但是在使用离子泵时遇到问题)
我修好了它! - 我认为。 基本上,将应用程序完全剥离后,我设法制造了一个插件,并使它能够正常工作。
毕竟我的代码没有错。
<body ng-app="app" ng-controller="MainCtrl">
<div id="bgId" class="{{colorVal}}">
<ion-nav-view animation="slide-left-right">
</ion-nav-view>
</div>
</body>
http://plnkr.co/edit/Oug8zD?p=preview
然后,我在我的应用上尝试了此代码-仍然无法正常工作! 因此,我尝试将我的ionic.bundle.js和ionic.css文件(使用npm安装的原始文件)替换为plunker(1.0.0-rc.1)中使用的文件,并且我的应用程序正常运行:)
希望这会在将来帮助其他陷入困境的人。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.