使用元素insde ng-view的ng-view的角動畫父div

Question

是否可以使用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;
        });
    }
}])

我不知道為什么失敗。 有任何想法嗎？？ 我是新手。 （試圖安裝一個塞子，但是在使用離子泵時遇到問題）

Answer 1

我修好了它！ - 我認為。 基本上，將應用程序完全剝離后，我設法制造了一個插件，並使它能夠正常工作。

畢竟我的代碼沒有錯。

<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）中使用的文件，並且我的應用程序正常運行:)

希望這會在將來幫助其他陷入困境的人。

使用元素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