使用元素insde NG-视图NG-鉴于角动画父DIV [英] Angular animate parent div of ng-view using element insde ng-view
问题描述
是否有可能CSS动画的div（背景色），这是NG-视图外，采用的NG-视图内的$状态的指令？
Is it possible to css animate a div (background-color) that is outside the ng-view, using a directive on a $state inside the ng-view?
在NG-视图具有CSS动画的路由。
The ng-view has css animations for the routing.
如果我没有动画的DIV那么NG-视图anims做工精细，但..
如果我添加动画类到div（bgId），那么路由anims不火。
If I do not animate the div then the ng-view anims work fine, but.. If I add animation classes to the div(bgId) then the routing anims do not fire.
下面是HTML的一个示例：（添加的按钮为例 - 通常是在模板页面例如home.html做为/ login.html的。）
Here is a sample of html: (Button added as example - would normally be in the template pages eg. 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。
This is controlled by a directive(swapcolour) that gets the nxtpage value from the button attr and updates the colorVal in MainCtrl.
// MainCtrl.js
//MainCtrl.js
.controller('MainCtrl', ['$scope', '$state', function($scope, $state) {
$scope.colorVal = 'redBg';
}])
// Directive.js
//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;
});
}
}])
我不知道它为什么失败。有任何想法吗？？我是新来的指令。 （想安装一个plunker，但与它越来越离子的工作问题）
I do not know why it fails. Any ideas?? I am new to directives. (Trying to setup a plunker, but having issues getting ionic working with it)
推荐答案
我修好了！ - 我认为。
之后基本上完全剥离应用到它的骨头我设法建立一个plunker，得到它的工作。
I fixed it! - I think. Basically after totally stripping the application to its bones I managed to build a plunker and got it working.
有没有什么错我的code毕竟。
There was nothing wrong with my code after all.
<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=$p$ PVIEW
然后我试图在我的应用程序这个code - 它仍然没有工作！所以，我想我的更换和ionic.bundle.js文件ionic.css（使用NPM安装原稿）与在plunker（1.0.0-RC.1）所使用的文件和我的应用程序的工作：）
Then I tried this code on my app - and it still did not work! So I tried replacing my ionic.bundle.js and ionic.css files (orig installed using npm) with the files used in the plunker (1.0.0-rc.1) and my app worked :)
希望这有助于别人麻烦的未来。
Hope this helps others in trouble in the future.
这篇关于使用元素insde NG-视图NG-鉴于角动画父DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
