AngularJS service/factory dynamically $compile HTML from $scope variable

Question

Attempting to consolidate a function used across multiple controllers in an AngularJS project to a service/factory that I can call using $rootScope. The goal is to change the following function:

$scope.twitterRefresh = function(obj) {
      try { 
          var old = document.getElementById('twitterContainer');
          old.parentNode.removeChild(old);
      }
      catch (err) {};
      var html = "<div id='twitterContainer'>"+$scope.game[0]['twitterEmbed']+"</div>";
    var elem = $compile(html)($scope);
    angular.element(document.getElementById('twitterEmbed')).append(elem);
};

into a combination of a $rootScope & service to avoid having to include the service in every controller that requires the function. The following code, however, isn't working:

app.factory('twitterRefresh', ['$document', '$compile', '$rootScope',
    function(obj,$document, $compile, $rootScope) {
  try { 
      var old = document.getElementById('twitterContainer');
      old.parentNode.removeChild(old);
  }
  catch (err) {};
  var html = "<div id='twitterContainer'>"+obj+"</div>";
  var scope = $rootScope.$new();
  var elem = $compile(html)(scope);
  angular.element(document.getElementById('twitterEmbed')).append(elem);
}]);

app.run(function($rootScope, twitterRefresh) {
    $rootScope.twitterRefresh= function(obj){
      twitterRefresh(obj);
    }
});

where the following function is called in the controller..

   $scope.twitterRefresh = $rootScope.twitterRefresh($scope.game[0]['twitterEmbed']);

$scope.twitterRefresh() = $rootScope.twitterRefresh.... did you mean to put the brackets () in? $scope.twitterRefresh = function() { $rootScope.twitterRefresh($scope.game[0]['twitterEmbed']); } looks more useful to me — Rhumborl
– Rhumborl, Commented Apr 10, 2018 at 21:16

Stradosphere · Accepted Answer · 2018-04-10 21:31:08Z

1

Don't define the function on each controller $scope, just leave it on $rootScope, and use it when needed elsewhere by injecting $rootScope into your controller and making it available that way.

   //something like this

   app.run(function($rootScope, $compile) {
       $rootScope.twitterRefresh= function(obj, scope){
           $compile(obj)(scope);
       }
   });

edited Apr 10, 2018 at 21:31

answered Apr 10, 2018 at 21:19

Stradosphere

1,2853 gold badges14 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

bomberjackets Over a year ago

i believe the question I have is how to pass the variable $scope.game[0]['twitterEmbed'] to either the service/factory or the rootScope function

bomberjackets Over a year ago

secondly, how should a $rootScope function correctly call the $compile service

Stradosphere Over a year ago

To correctly call $compile you would need to pass the $scope instance to the $rootScope function you have defined. If your $rootScope function is in app.js run function, make sure you inject $compile service, and pass the $scope instance from the controller. That should work.

karaxuna · Accepted Answer · 2018-04-10 21:36:27Z

0

Try this way:

app.factory('twitterRefresh', ['$document', '$compile', '$rootScope',
  function($document, $compile, $rootScope) {
    return function (obj) {
      try { 
        var old = document.getElementById('twitterContainer');
        old.parentNode.removeChild(old);
      }
      catch (err) {};
      var html = "<div id='twitterContainer'>"+obj+"</div>";
      var scope = $rootScope.$new();
      var elem = $compile(html)(scope);
      angular.element(document.getElementById('twitterEmbed')).append(elem);
    }
  }
]);

answered Apr 10, 2018 at 21:36

karaxuna

26.9k13 gold badges86 silver badges120 bronze badges

Collectives™ on Stack Overflow

AngularJS service/factory dynamically $compile HTML from $scope variable

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related