ng-view 的 Angular 动画父 div 使用元素 insde ng-view [英] Angular animate parent div of ng-view using element insde ng-view
问题描述
是否可以使用 ng-view 内部 $state 上的指令为 ng-view 外部的 div(背景颜色)设置 css 动画?
ng-view 具有用于路由的 css 动画.
如果我不为 div 设置动画，那么 ng-view 动画就可以正常工作，但是..如果我向 div(bgId) 添加动画类，则路由动画不会触发.
这是一个 html 示例:(作为示例添加的按钮 - 通常在模板页面中，例如 home.html/login.html )
<div id="bgId" class="{{colorVal}}"><ion-nav-view animation="slide-left-right"></ion-nav-view><button swapcolour="changeColour()" data-nxtpage="1">更改颜色</button>
这由指令(swapcolour)控制，该指令从按钮 attr 获取 nxtpage 值并更新 MainCtrl 中的 colorVal.
//MainCtrl.js
.controller('MainCtrl', ['$scope', '$state', function($scope, $state) {$scope.colorVal = 'redBg';}])//指令.js
.directive('swapcolour', function ($rootScope, $state) {var pageArr = [{home:'redBg'},{login:'blueBg'}];返回函数(范围、元素、属性){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，但在使用它时遇到问题)
我修好了！- 我认为.基本上，在将应用程序完全剥离之后，我设法构建了一个 plunker 并使其正常工作.
毕竟我的代码没有任何问题.
<div id="bgId" class="{{colorVal}}"><ion-nav-view animation="slide-left-right"></ion-nav-view>http://plnkr.co/edit/Oug8zD?p=preview
然后我在我的应用程序上尝试了这段代码 - 但它仍然不起作用！所以我尝试用plunker(1.0.0-rc.1)中使用的文件替换我的ionic.bundle.js和ionic.css文件(使用npm安装的orig)并且我的应用程序工作:)
希望这能帮助将来遇到麻烦的其他人.
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?
The ng-view has css animations for the routing.
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.
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>
This is controlled by a directive(swapcolour) that gets the nxtpage value from the button attr and updates the colorVal in MainCtrl.
//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;
});
}
}])
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)
I fixed it! - I think. Basically after totally stripping the application to its bones I managed to build a plunker and got it working.
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=preview
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.
这篇关于ng-view 的 Angular 动画父 div 使用元素 insde ng-view的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
