Search code examples
javascriptangularjsangular-servicesangular-controller

angular service between controllers


I have a service which is empty on load:

app.factory("bookmark",function(){
    var bookmark = {};
    return bookmark;
});

I have controller A which sets the value of service and redirects to second controller where I try to access the service value which is empty.

Controller A:

app.controller('bookmarksController', function($scope, localStorageService, bookmark) {
  // localStorageService.clearAll();

  $scope.bookmarks = localStorageService.keys();
  $scope.setBookmarkServ = function (key){
    console.log('bookmark service set');

    bookmark = key;
    console.log(bookmark);

  }

  $scope.go2bookmark = function (key){

    console.log('go2bookmark called');

    var obj = localStorageService.get(key);
    return obj.link;
  }
});

Template A:

   <script type="text/ng-template" id="bookmarks">
    <div ng-controller="bookmarksController">
      <hr style="clear:both;opacity:0;" />
        <div class="logo"></div>
        <h1>Bookmarks</h1>
        <div ng-repeat="mark in bookmarks" class="col-xs-12 col-sm-6 col-md-3">
             <a ng-click="setBookmarkServ(mark)" ng-init="theLink = go2bookmark(mark)" href="#{{theLink}}" class="thumbnail alert-info" style="height:150px;">
              <div class="caption">
                <h3>{{ mark }}</h3>
                {{theLink}}
              </div>
             </a>
        </div>
     </div>  
    </script>

Controller B where service is {} empty:

app.controller('baselistController', ['$scope', '$routeParams', '$route', '$http', 'customview', '$location', '$uibModal', '$cacheFactory', '$templateCache', 'columnselector', '$interval', '$rootScope', 'globalVarService', '$window', '$controller', '$timeout', 'localStorageService', 'bookmark',

  function ($scope, $routeParams, $route, $http, customview, $location, $uibModal, $cacheFactory, $templateCache, columnselector,  $interval, $rootScope, globalVarService, $window, $controller, $timeout, localStorageService, bookmark) {

    //set value doesn't perist
    console.log(bookmark);
    ...
    ...

Solution

  • app.factory("bookmark",function(){
        var _bookmark = {};
        var setBookMark = function(key){
            _bookmark = key;
        }
    
        var getBookMark = function(){
            return _bookmark;
        }
        return {
            GetBookMark = getBookMark,
            SetBookMark = setBookMark 
        };
    });
    

    Now you can use this service to set and get bookmarks,

    In controller A,

    app.controller('bookmarksController', function($scope, localStorageService, bookmark) {
          bookmark.SetBookMark(localStorageService.keys(););
    }
    

    And get bookmark in Controller B,

    app.controller('baselistController', ['$scope', '$routeParams', '$route', '$http', 'customview', '$location', '$uibModal', '$cacheFactory', '$templateCache', 'columnselector', '$interval', '$rootScope', 'globalVarService', '$window', '$controller', '$timeout', 'localStorageService', 'bookmark',
      function ($scope, $routeParams, $route, $http, customview, $location, $uibModal, $cacheFactory, $templateCache, columnselector,  $interval, $rootScope, globalVarService, $window, $controller, $timeout, localStorageService, bookmark) {
    
        console.log(bookmark.GetBookMark());
    }