Question

在我的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>

Answer 1

您可能会将其分为指令和服务。像这样说：

app.service('MyOverlayService', [function(...){}]);
app.directive('myOverlay', ['MyOverlayService', function(os){...}];

您的服务包含以下内容：

可见[boolean]
要显示的对象列表（也许是菜单项？）
等

并且您的指令听了这些事情：

基于{{os.visible}}切换显示/可见
例如，如果这是一个菜单，列出所有数据，您可以在os.menus中ng-repeat项目

然后您可以将overlay指令放在最高模板上，并在每个控制器中注入MyOverlayService并执行以下操作：

os.setVisible(true); // or os.toggle()

如何从AngularJS服务中提取DOM元素到自己的模板中？

1 个答案: