将数据从指令移动到动画

时间:2015-11-05 07:53:26

标签: javascript angularjs scope ng-animate

动画中的

Module.directive我有一个数组,用于保存选项数组中的数据,我把它带到来自控制器文件script.js并位于linkfunction中 我的问题是我想将数组传递给animationModule.animation 怎么做这个

contoller script.js的这个文件

var myApp = angular.module('myApp', ['ngMaterial', 'ngAnimate', 'customAnimation']);
/*angular.element(document).ready(function() {
 angular.bootstrap(document, ['myApp']);
 });
 */


myApp.controller('View', function ($scope , $rootScope , mySharedService) {
    // start
    var vm = this;
    vm.in = false;
    vm.direction = 'left';

    vm.optionsanimate = [
        {
            type: 'slide',
            direction: vm.direction,
            parameters: {
                x: {
                    start: '-100%',
                    end: '0'
                },
                opacity: {
                    start: 0,
                    end: 1
                }
            }
        },
        {
            type: 'fade',
            direction: vm.direction,
            parameters: {
                opacity: {
                    start: 0,
                    end: 1
                },
                x: {
                    start: '0',
                    end: '0'
                }
            }
        }
    ];

    vm.changeState = function (direction) {
        $scope.in = vm.in = !vm.in;//handle the ng-if

    /*    $scope.direction='left';*/
        vm.optionsanimate.animationInstance

        console.table(vm);
    }

});


myApp.factory('mySharedService', function($rootScope) {
    var sharedService = {};

    sharedService.message = '';

    sharedService.prepForBroadcast = function(msg) {
        this.message = msg;
    };

    sharedService.broadcastItem = function() {
        $rootScope.$broadcast('handleBroadcast');
    };
console.log(sharedService)
    return sharedService;
});

这个指令文件

var animationModule = angular.module('customAnimation', ['ngAnimate']);
var xStartglobal='';
var xendglobal='';
animationModule.factory('customAnimationFactory', ['$animateCss', function ($animateCss) {


    function parseOptions(element, options ) {
        console.log(options[0]);

       var xstart=options[0].parameters.x.start;



        /* var oAnimData = customAnimationClass.prototype.setCSSParamsEnter(options[1].parameters.x.start, options[1].parameters.x.end,options[1].parameters.opacity.start, options[1].parameters.opacity.end);*/



    }

    //constructor

    var customAnimationClass = function customAnimationClass(params, element) {
        this.params = params;
        this.element = element;


        //parseOptions(element, this.params);

        //parseOptions(element, this.params, $animate ,paramend);

    }

    customAnimationClass.prototype = {
        parseOptions: parseOptions,
        //xStart: xStart,
        setCSSParamsEnter: function (xStart, xEnd,oStart,oEnd) {
            var params = this.params;
            //start , end
            angular.forEach(params, function (param, index) {

            });


            return {
                //structural: true,
                from: {
                    opacity: oStart,
                    transform: 'translate3d(' + xStart + ', 0, 0)'
                },
                to: {
                    opacity: oEnd,
                    transform: 'translate3d(' + xEnd + ', 0, 0) '
                }
            }
        },

        setCssParamsLeave: function (xStart, xEnd,oStart,oEnd) {
            var params = this.params;

            angular.forEach(params, function (param, index)
            { });
            return {
                //structural: true,

                from: {
                    opacity: oEnd,
                    transform: 'translate3d(' + xStart + ', 0, 0)'
                },
                to: {
                    opacity: oStart,
                    transform: 'translate3d(' + xEnd + ', 0, 0)'
                }

            }

        }
    }

    return customAnimationClass;
}]);
animationModule.factory('data',  function ($animateCss) {
    var dataservice = function dataservice(params1,$scope) {
        this.params1 = params1;
        var start= this.params1;
        console.log(this.params1);




        //parseOptions(element, this.temp);

        //parseOptions(element, this.params, $animate ,paramend);

    }
    return dataservice;
});



animationModule.directive('customAnimation', ['customAnimationFactory', 'mySharedService','$animate' ,'data', function (customAnimationFactory , mySharedService,$animateCss,data) {
var flag=false;
    return {
        restrict: 'A',
        controller:'View',
        controllerAs:'vm',
        bindToController:true,

        link: function ($scope, $element, attrs,$ctrl,controller) {
            var ctrl = this;

            console.log($ctrl.in);
            ctrl.options = $scope.$eval(attrs['animation']);
            console.log(ctrl.options);
            //$scope.xStart= ctrl.options[0].parameters.x.start;
            xStartglobal= ctrl.options[0].parameters.x.start;
            ////$scope.xSEnd= ctrl.options[0].parameters.x.end;
            xendglobal= ctrl.options[0].parameters.x.end;

            var xx = new data(ctrl.options,$scope);
            //ctrl.options.animationInstance =new slide(ctrl.options);





            $element.addClass(ctrl.options[0].type);



            //ctrl.options.animationInstance = new customAnimationFactory(ctrl.options, $element, mySharedService.message);
            //if($ctrl.in==false) {
            //    //ctrl.options.animationInstance = new customAnimationFactory(ctrl.options, $element, mySharedService.message);
            ///*    ctrl.options.animationInstance.setCSSParamsEnter('-100%','0','0','1');
            //    ctrl.options.animationInstance.setCssParamsLeave('0','-100%','0','1');
            //    flag=true;*/
            //
            //}


            console.log("dori");





        }


    };

}]);


animationModule.animation('.slide', ['$animateCss', 'customAnimationFactory','data' ,function ($animateCss, customAnimationFactory,data) {


var x= new customAnimationFactory(0,0);


    return {


        enter: function (element,$scope) {


            $scope.temp=data.start;
            console.log("this x");
            console.log($scope.temp);

            //console.log($scope.xstart);

            console.log(element[0].attributes.vm);
            //console.table();
            console.log(xStartglobal);

            return $animateCss(element, x.setCSSParamsEnter('-100%','0','0','1' ));
            //return $animateCss(element, customAnimationService.setCSSParamsEnter());
        },


        leave: function (element) {

            return $animateCss(element,  x.setCssParamsLeave('0','-100%','0','1' ));
        }
    }
}]);

这是我的掠夺者 http://plnkr.co/edit/Qywbt7bvKfs9b5lpvRY9?p=info

0 个答案:

没有答案