Question

是否可以使用ng-view中$ $状态的指令css为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;
        });
    }
}])

我不知道为什么会失败。有任何想法吗？？我是指令的新手。（试图设置一个plunker，但有问题让离子工作）

Answer 1

我修好了！ - 我认为。基本上在完全剥离应用程序到它的骨头后，我设法建立了一个plunker并让它工作。

毕竟我的代码没有任何问题。

<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

然后我在我的应用程序上尝试了这个代码 - 它仍然无效！所以我尝试用plunker（1.0.0-rc.1）中使用的文件替换我的ionic.bundle.js和ionic.css文件（使用npm安装的orig），我的app工作正常：）

希望这有助于将来遇到麻烦的其他人。

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

1 个答案: