Как извлечь элементы DOM из сервиса AngularJS в их собственный шаблон? - PullRequest
Новая
       37

Как извлечь элементы DOM из сервиса AngularJS в их собственный шаблон?

1 голос
/ 15 апреля 2019

В моем приложении AngularJS у меня есть service (или, технически, provider), который содержит набор логики для вставки элементов DOM в <body>.

Это довольно громоздко и трудно следовать; например, существует много .append вызовов одного элемента в другой и в другой.

Я хотел бы извлечь весь код DOM из сервиса в его собственный файл шаблона. Проблема в том, что я могу найти примеров о том, как сделать это с помощью директив, но я не могу понять, как это будет работать со службой.

ОБРАТИТЕ ВНИМАНИЕ, что мне нужно, чтобы это оставалось сервисом (в отличие от директивы), потому что мне нужно, чтобы оно перекрывало весь экран и могло вызываться из разных контроллеров.

Я воссоздал свою ситуацию в 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>

1 Ответ

0 голосов
/ 16 апреля 2019

Возможно, вы могли бы сделать это как в Директиве, так и в Службе.Скажите что-то вроде: 

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

Где ваш сервис содержал такие вещи как:

  • visible [boolean]
  • список отображаемых объектов (возможно, пунктов меню?)
  • и т. Д.

, и ваша директива слушала эти вещи:

  • Переключение отображения / видимого на основе {{os.visible}}
  • Перечислите все данные, например, если это меню, вы должны повторить пункты в os.menus

Затем вы можете поместить свою директиву overlay в ваш самый высокий шаблон, и вкаждый из ваших контроллеров внедряет MyOverlayService и делает: 

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