Service:

angular.module('frame-data-storage', []) .service('frameDataStorage', frameDataStorage); frameDataStorage.$inject = []; function frameDataStorage() { var _logo = '', _category = '', _pinfo = ''; return { setLogo: function (logo) { _logo = logo; }, setCat: function (category) { _category = category; }, setProviderInfo: function (pinfo) { _pinfo = 'dsdsdsaf443'; }, getLogo: function () { return _logo; }, getCat: function () { return _category; }, setProviderInfo: function () { return _pinfo; } } }

A piece of controller from which data needs to be transferred

  /*data to service*/ frameDataStorage.setLogo($scope.searchServices.icon); frameDataStorage.setCat($scope.categoryName); frameDataStorage.setProviderInfo($scope.providerInfo); /*end data to service*/

And the directive in which I want to pass

 angular.module('navigation.frameNavBottom', []) .directive('frameNavBottom', ['frameDataStorage', function(frameDataStorage) { return { template: require('./templates/index.html'), link: function($scope, iElm, iAttrs, controller, $translate, frameDataStorage) { $scope.logo = frameDataStorage.getProviderInfo(); } } } ]); module.exports = 'navigation.frameNavBottom';

And another one

 var app = angular.module('navigation.frameNavTop'); app.directive('frameNavTop', ['$window', frameNavTop]); function frameNavTop($window) { return { template: require('../templates/header.html'), controller: ['$rootScope', '$scope', '$state', '$document', 'Authentication', 'Bills', 'frameDataStorage', Ctrl], controllerAs: 'vm', }; function Ctrl($rootScope, $scope, $state, $document, Authentication, Bills, frameDataStorage) { $scope.state = $state; $scope.preLoader = false; $scope.sliderFormPreLoader = false; $scope._sliderFormActive = ''; $scope.isAuth = false; $scope.billsNum = 0; /*service frameDataStorage*/ $scope.logo = frameDataStorage.getLogo(); /*end service frameDataStorage*/ setTimeout(function(){ $("#payment-logo img").clone().appendTo("#service-logo-block"); }, 2500); $scope.goTop = function () { if($state.current.name == 'pages.main') { $document.scrollTopAnimated(0); } }; } } module.exports = app;

So far I have decided with her the question in this way

 setTimeout(function(){ /*service frameDataStorage*/ $scope.logo = frameDataStorage.getLogo(); console.log('logo',$scope.logo);//TODO: delete /*end service frameDataStorage*/ }, 2500);

The problem is that data cannot be transferred to them. In the usual controller is different, everything works fine, the data is stored in the service. But in the directives he writes

TypeError: Cannot read property 'getProviderInfo' of undefined

  • link function does not embed dependencies. She has a strict set of parameters. Dependencies can be added to the declaration directives that you have done, for example here .directive('frameNavBottom', ['frameDataStorage', function(frameDataStorage) {
  • @ArtemGorlachev, it doesn't matter here - Grundy
  • dealt with the second directive, added timeout. because at first the directive pulled from the service and then in the controller the data was written to the service. but it's like a crutch for me. How to fix it? something with asynchrony? - Maxim
  • I did not understand about the second directive, but jquery and setTimeout are usually not needed in the controller - Grundy
  • removed. now another error TypeError: frameDataStorage.getProviderInfo is not a function - Maxim

1 answer 1

link function link not embed dependencies.

She has a strict set of parameters.

 link: function($scope, iElm, iAttrs, controllers)

Dependencies can be added to the declaration directives that you have done, for example here

 .directive('frameNavBottom', ['frameDataStorage', function(frameDataStorage) {

removing frameDataStorage from the link parameters this part should earn

 .directive('frameNavBottom', ['frameDataStorage', function(frameDataStorage) { return { template: require('./templates/index.html'), link: function($scope, iElm, iAttrs, controller) { $scope.logo = frameDataStorage.getProviderInfo(); } } }

In addition, in frameDataStorage , an object is returned without the getProviderInfo method, but with two setProviderInfo .

As a rule, using setTimeout and jquery directly in the controller adds more hassle than helping to solve something, so you should reconsider their use in this place.

 setTimeout(function(){ $("#payment-logo img").clone().appendTo("#service-logo-block"); }, 2500);
  • In general, this kusov removed. It was a temporary decision. thanks - Maxim
  • can you tell me how to make the data load when needed? But it turns out when the page is first loaded, the data goes to the service and only after rebooting is displayed in the view. even a timeout does not save - Maxim
  • @Maxim, it is worth asking a separate question, with a minimal sample code, preferably working. I don’t quite understand what kind of reboot is in question and how they are generally obtained and used, including in view data and service - Grundy