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