我已经尝试了好几天了。
我有一个连接到背景层 bgId 的父 Controller MainCtrl。 (这是在 ion-nav-view 之外)
此 Controller 的子 Controller 是 HomeCtrl。 (在“ion-nav-view”中)
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');
};
//....
}]);
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>
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]);
});
};
})
最佳答案
@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
关于javascript - 在子 Controller 中触发时，Ionic AngularJS 父动画无法正确运行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28905390/