Question

尝试将AngularJS项目中多个控制器使用的函数合并到我可以使用$rootScope调用的服务/工厂。目标是更改以下功能：

$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＆amp; 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服务/工厂从$ scope变量动态$编译HTML

2 个答案: