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

Ionic AngularJS parent animation not running correctly when triggered in child controller

本文关键字：动画 AngularJS 运行 Ionic 控制器      更新时间：2023-09-26

我已经尝试了好几天了。

我有一个连接到背景层CCD_ 2的父控制器CCD_。（这在ion-nav-view之外）此控制器的子级是HomeCtrl。（在"离子导航视图"内）HomeCtrl有一个按钮，按下它时应该：a） 过渡到下一个状态b） 改变CCD_ 5层的颜色。我可以更改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');
    };        
    //....
}]);

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

指令.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]);           
        });        
    };
})

@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

我在这里更新了答案：使用ng视图中的元素对ng视图的父div进行角度动画化

相关文章：