使用元素insde ng-view的ng-view的角动画父div

Question

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-view内$ state上的指令，使ng-view外的div（背景色）动画化？

The ng-view has css animations for the routing. ng-view具有用于布线的CSS动画。

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. 如果我不为div设置动画，则ng-view动画效果很好，但是..如果我将动画类添加到div（bgId）中，则路由动画不会触发。

Here is a sample of html: (Button added as example - would normally be in the template pages eg. home.html / login.html ) 这是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>

This is controlled by a directive(swapcolour) that gets the nxtpage value from the button attr and updates the colorVal in MainCtrl. 这由指令（swapcolour）控制，该指令从按钮attr获取nxtpage值并更新MainCtrl中的colorVal。

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

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) （试图安装一个塞子，但是在使用离子泵时遇到问题）

Answer 1

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 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 :) 因此，我尝试将我的ionic.bundle.js和ionic.css文件（使用npm安装的原始文件）替换为plunker（1.0.0-rc.1）中使用的文件，并且我的应用程序正常运行:)

Hope this helps others in trouble in the future. 希望这会在将来帮助其他陷入困境的人。

使用元素insde ng-view的ng-view的角动画父div

问题描述

1 个解决方案

解决方案1
1 2015-04-01 17:27:53

使用元素insde ng-view的ng-view的角动画父div

问题描述

1 个解决方案

解决方案1 1 2015-04-01 17:27:53

解决方案1
1 2015-04-01 17:27:53