在我的AngularJS应用程序中，我有一个service（或者更专业的，provider），它包含一堆逻辑来在<body>上插入DOM元素。
这很麻烦，很难遵循;例如，有很多.append调用一个元素到另一个元素和另一个元素。
我想将服务中的所有DOM代码提取到自己的模板文件中。问题是，虽然我可以找到examples如何使用指令执行此操作，但我无法弄清楚它如何与服务一起使用。
请注意，我需要它来保持服务（而不是指令），因为我需要它覆盖整个屏幕并可以从各种不同的控制器调用。
我重新创建了我的情况in a Plunkr及以下，虽然服务的DOM逻辑明显简化和缩小
var app = angular.module('App', []);
app.provider('MyProvider', [function(){
this.$get = ['$window', function($window){
return function(){
var bodyElement = angular.element($window.document.body);
var myNewElement = angular.element('<div class="my-new-element">');
var someText = angular.element('<p>Here is some text<p>');
var xButton = angular.element('<button>X</button>');
xButton.on('click', function(){
myNewElement.remove();
});
myNewElement.append(someText);
myNewElement.append(xButton);
bodyElement.append(myNewElement);
}
}];
}]);
app.controller('MainController', ['$scope', 'MyProvider', function($scope, MyProvider){
$scope.amount1 = 1234.56;
$scope.symbol2 = 'USD$';
$scope.amount2 = '1234.56';
$scope.activateService = function(){
MyProvider();
}
}]);<!doctype html>
<html ng-app="App">
<head>
<script type="text/javascript" src="https://code.angularjs.org/1.5.8/angular.js"></script>
<style>
.my-new-element {
width: 100%;
height: 50%;
background-color: green;
position: fixed;
top: 0px;
left: 0px;
}
button {
padding: 10px;
margin: 15px 0;
background-color: #bbb;
}
</style>
</head>
<body ng-app="">
<div ng-controller="MainController">
<span>Amount1: {{amount1 | currency:"USD$"}}</span><br/>
<span>Symbol2: <input ng-model="symbol2"/></span><br/>
<span>Amount2: <input ng-model="amount2"/></span><br/>
<button ng-click="activateService()">Activate The Service</button>
</div>
</body>
</html>您可能可以将其转换为指令和服务。说出类似的话：
app.service('MyOverlayService', [function(...){}]);
app.directive('myOverlay', ['MyOverlayService', function(os){...}];
您的服务包含以下内容：
并且您的指令听取了这些事情：
然后，您可以将overlay指令放在最高模板上，并在每个控制器中注入MyOverlayService并执行以下操作：
os.setVisible(true); // or os.toggle()