个人中心
gpt4 book ai didi

javascript - 在子 Controller 中触发时，Ionic AngularJS 父动画无法正确运行

转载 作者：太空宇宙 更新时间：2023-11-04 12:13:06 25 4
gpt4 key购买 nike

我已经尝试了好几天了。

我有一个连接到背景层 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/

25 4 0
文章推荐： jquery - 如何为移动浏览器制作全 Angular 滑入式部分？
文章推荐： c++ - 使用 boost::lambda::bind 的任意函数调用？
文章推荐： C++ 私有(private)访问其他类的成员
文章推荐： JavaScript 获取多个已知元素 ID
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com