Question

我目前正在学习AngularJS，我想创建一个通知模块，但我找不到任何帮助教程。

我想将所有通知添加到div中，我首先需要创建它。所以这是我的第一个问题。我在哪里必须将元素附加到DOM中，因此代码仍然是有效的角度代码。

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

我通过在module.run（）函数中附加div来解决它，但我不认为它应该在那里

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'));
    };
}]);

基本上这也适用，但是当我想为通知创建指令时，它将不适用。我已经看到了使用$ compile方法完成的示例，但它总是发生在另一个指令或控制器中，因为需要一个范围，我在工厂内没有。

我做错了什么？

Answer 1

定义一个控制器，它维护一组通知：

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

然后在HTML中，对此阵列执行ng-repeat：

    <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>

AngularJS在工厂中创建元素

1 个答案: