Question

我已经尝试了几天了。

我有一个父控制器＆＃39; MainCtrl＆＃39;连接到背景图层＆＃39; bgId＆＃39;。（这是＆＃39; ion-nav-view＆＃39;）的一面这个控制器的孩子是HomeCtrl＆＃39;。（在＆＃39; ion-nav-view＆＃39;内） HomeCtrl有一个按钮，按下它应该： a）过渡到下一个国家 b）改变bgId层的颜色。我可以让bgId层改变，但转换不会发生 - 它只是弹出到位。如果我禁用任何一个动画，那么另一个工作正常，但两个启用我得到恼人的弹出效果。

任何人都有任何想法解决方案是什么？

编辑：以下是一些相关的代码部分。 // .... =为清晰起见删除了代码

的index.html

<body ng-app="app" ng-controller="MainCtrl">        
    <div id="bgId" class="{{colorVal}}">
        <ion-nav-bar>
            <ion-nav-back-button mylohit="changeColour()" class="button-clear" data-mylocurrpage="0" data-mylonxtpage="0" >
            </ion-nav-back-button>                
        </ion-nav-bar>            
        <ion-nav-view animation="slide-left-right">
        </ion-nav-view>
    </div> 
</body>

app.css

.greenBg-add, .greenBg-remove,
.redBg-add, .redBg-remove,
.blueBg-add, .blueBg-remove,
.yellBg-add, .yellBg-remove,
.purpBg-add, .purpBg-remove {
  -webkit-transition: background 1000ms linear !important;
  -moz-transition: background 1000ms linear !important;
  -o-transition: background 1000ms linear !important;
  transition: background 1000ms linear !important; }

.greenBg,
.greenBg-add.greenBg-add-active {
  background-color: #9BDB25; }

.redBg,
.redBg-add.redBg-add-active {
  background-color: #D62459; }

.blueBg,
.blueBg-add.blueBg-add-active {
  background-color: #51DBD8; }

.yellBg,
.yellBg-add.yellBg-add-active {
  background-color: #D8DB51; }

.purpBg,
.purpBg-add.purpBg-add-active {
  background-color: #662eb4; }

app.js

var myloApp = angular.module('app', ['ionic', 'app.controllers', 'app.servicesConnect', 'app.servicesData', 'app.servicesAuth', 'app.services', 'app.directives', 'ionic.utils', 'firebase', 'ngCordova', 'ngAnimate']);
app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {

  $stateProvider
  .state('home', {
    url: '/',
    templateUrl: 'templates/home.html',
    controller: 'HomeCtrl'    
  })  
  .state('page1', {
    url: '/page1',
    templateUrl: 'templates/page1.html',
    controller: 'Page1Ctrl'    
  })
  .state('page2', {
    url: '/page2',
    templateUrl: 'templates/page2.html',
    controller: 'Page2Ctrl'    
  });

  //....

  $urlRouterProvider.otherwise('/');  
}]);

controllers.js

angular.module('app.controllers', [])
.controller('MainCtrl', ['$scope', '$state', 'ServicesMisc', 'ServicesAuth', function ($scope, $state, ServicesMisc, ServicesAuth) {        
    //....    
    $scope.colorVal = 'redBg';  //initial class colour
    $scope.prevColorVal = 'redBg';

    $scope.changeColour = function () {
        console.log('main : change colour');
    };    
    //....
}])
.controller('HomeCtrl', ['$scope', 'ServicesAuth', 'ServicesData', 'ServicesMisc', function ($scope, ServicesAuth, ServicesData, ServicesMisc) {        
    //....        
    $scope.changeColour = function () {
        console.log('home : change colour');
    };        
    //....
}])
.controller('Page1Ctrl', ['$scope', 'ServicesAuth', 'ServicesData', 'ServicesMisc', function ($scope, ServicesAuth, ServicesData, ServicesMisc) {
    //....        
    $scope.changeColour = function () {
        console.log('page1 : change colour');
    };        
    //....
}]);

模板/ home.html的

<ion-view title="Home">
    <ion-content ng-controller="HomeCtrl" id="homeCont">
        <div class="container">
        //....
            <div class="home-btns-cont">
                <a mylohit="changeColour()" data-mylocurrpage="0" data-mylonxtpage="1" class="txtWhite home-btns-text button icon-right ion-plus-round button-clear button-dark">new entry</a>
            </div>
            <div class="home-btns-cont">
                <a mylohit="changeColour()" data-mylocurrpage="0" data-mylonxtpage="4" class="txtWhite home-btns-text button icon-right ion-stats-bars button-clear button-dark">view stats</a>
            </div>
        </div>
    </ion-content>
</ion-view>

directives.js

angular.module('app.directives', [])
.directive('mylohit', function ($rootScope, $state) {    
    var pageArr = [{home:'redBg'}, {page1:'greenBg'}, {page2:'yellBg'}, {page3:'blueBg'}, {page4:'purpBg'}, {page5:'blueBg'}];
    var pagelen = pageArr.length;    
    var colInit = pageArr[0];   
    var backPageCol = colInit.page2;    

    return function (scope, element, attrs) {  

        var nextPageNum = attrs.mylonxtpage;
        var currPageNum = attrs.mylocurrpage;
        var obj = pageArr[nextPageNum];
        var item = Object.keys(obj);
        var objItem = obj[item];

        element.bind('click', function () { 
            $rootScope.$$childHead.prevColorVal = currPageNum;            
            $rootScope.$$childHead.colorVal = objItem; 

                $state.transitionTo(item[0]);           
        });        
    };
})

Answer 1

@tasseKATT有正确的想法！

我终于设法将代码放入一个plunker并修复问题。基本上，我用plunker版本替换了我的curr ionic.bundle.js，它们都开始工作了。

<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>

http://plnkr.co/edit/Oug8zD?p=preview

我在这里更新了答案： Angular animate parent div of ng-view using element insde ng-view

在子控制器中触发时，离子Angularjs父动画未正确运行

1 个答案: