AngularJS создать элемент на заводе

В настоящее время я изучаю AngularJS, и я хочу создать модуль для уведомлений, но я не могу найти никаких учебных пособий.AngularJS создать элемент на заводе

Я хочу, чтобы все мои уведомления добавляли в div, который мне нужно создать вначале. Итак, вот мой первый вопрос. Где я должен добавить элемент в DOM, чтобы код по-прежнему был действительным угловым кодом.

<!DOCTYPE html> 
<html> 
    <head> 
     ... 
    </head> 
    <body> 
     ... 
     <div class="notification-center"> //Element I need to create 
      ... //Notifications come here 
     </div> 
    </body> 
</html>

Я решил ее путем добавления DIV внутри функции module.run(), но почему-то я не думаю, что он должен быть там

var notification = angular.module('notification', []); 

notification.run([function(){ 
    var el = angular.element('#notificationcenter'); 

    if(!angular.element(el).length){ 
     el = angular.element('<div>').attr('id', 'notificationcenter').text('{{ text }}').appendTo(angular.element('body')); 
    } 
}]);

Для создания уведомлений я написал где я добавляю другой div внутри #notificationcenter div.

notification.factory('notification', [function(){ 
    var defaults = { 
     duration: 5000 
    }; 

    return function(text, settings){ 
     var element = angular.element('<div>').addClass('notification').text(text).appendTo(angular.element('#notificationcenter')); 
    }; 
}]);

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

Что я делаю неправильно?

источник

2015-10-26 David Schwarz

https://docs.angularjs.org/guide/директива – Phil

с использованием 'angleular.element' ничем не отличается от использования JQuery. если вы планируете создать директиву, которая управляет DOM, она должна использовать шаблон, а не 'angular.element'. и фабрики должны ** никогда не быть ответственными за код DOM. – Claies

Определить контроллер, который поддерживает массив уведомлений:

notification.controller('NotificationController', function() { 
     var ctrl = this; 
     ctrl.notificationArray = [ ]; 
     ctrl.addNote = function (note) { 
      ctrl.notificationArray.push(ctrl.notificationArray.length + ". " + note); 
     }; 
    });

Затем в HTML, выполнить нг-повтора на этом массиве:

<div ng-controller="NotificationController as ctrl"> 
     <div class="notification-center" ng-if="ctrl.notificationArray.length>0"> 
      <div class="notification" ng-repeat="note in ctrl.notificationArray"> 
       {{note}} 
      </div> 
     </div> 
     <button ng-click="ctrl.addNote('another note');">Add note</button> 
    </div>

источник

2015-10-26 23:46:05

Это хорошая идея, но где мне нужно добавить «обертку» -div? Внутри функции module.run()? Поскольку я хочу повторно использовать модуль, и я не хочу заботиться о написании div вручную в шаблоне (-ах) –

Чтобы сделать это многоразовым, вы должны создать «директиву». Пожалуйста, следуйте руководству AngularJS, чтобы узнать, как это сделать (docs.angularjs.org/guide/directive). –

AngularJS создать элемент на заводе

ответ

Смежные вопросы