AngularJS service/factory 从 $scope 变量动态 $compile HTML

Question

正在尝试将 AngularJS 项目中跨多个控制器使用的功能合并到我可以使用 $rootScope 调用的 service/factory。目标是更改以下功能：

$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);
};

组合成 $rootScope 和 service 以避免必须在每个需要该功能的控制器中包含该服务。但是，以下代码不起作用：

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);
    }
});

在控制器中调用了以下函数..

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

Answer 1

不要在每个控制器 $scope 上定义该函数，只需将其保留在 $rootScope 上，并在其他地方需要时通过将 $rootScope 注入您的控制器并使其可用。

   //something like this

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

Answer 2

试试这个方法：

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);
    }
  }
]);

AngularJS service/factory 从 $scope 变量动态 $compile HTML

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

javascript

angularjs

angularjs-scope