javascript - 如何在 angular.js 中将数据从服务传递到指令

Question

我有一个警报服务，它在页面顶部显示警报。我编写了一个服务和一个指令，该指令利用来自服务的数据。

但是，当我使用警报服务添加服务并将其传递给指令时，它不会显示警报

这是我的代码

模板

<div class="alert alert-{{alert.type}}">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true" ng-click="close()">&times;</button>
    <div ng-bind="::alert.message" ></div>
</div>

警报服务和指令

angular.module('test')
    .service('alertService', function() {
        var alerts = [];
        this.add = function(type, msg) {
            var self = this;
            var alert = {
                type: type,
                msg: msg,
                close: function() {
                    return self.closeAlert(alert);
                }
            };
            return alerts.push(alert);
        };
        this.closeAlert = function(alert) {
            return this.closeAlertIdx(alerts.indexOf(alert));
        };
        this.closeAlertIdx = function(index) {
            return alerts.splice(index, 1);
        };
        this.clear = function() {
            alerts = [];
        };
        this.getAlerts = function() {
            return alerts;
        };
    })
    .directive('alertList', ['alertService', function(alertService) {
        return {
            restrict: 'EA',
            templateUrl: 'templates/alert/alert.html',
            replace: true,
            link: function(scope) {
                scope.alerts = alertService.getAlerts();
            }
        };
    }]);

在index.html中，我引用了alert-list指令

<div>
   <alert-list ng-repeat="alert in alerts">
   </alert-list>
</div>

在我的 Controller 中，

alertService.add('info', 'This is a message');

我看到alertService将警报添加到数组中，但是当我在指令的链接函数中放置断点时，它永远不会被调用

Answer 1

服务是返回对象的函数，因此您必须将服务修改为或多或少像这样:

.service('alertService', function() {
  var alerts = [];
  return{
      add : function(type, msg) {
          var self = this;
          var alert = {
              type: type,
              msg: msg,
              close: function() {
                  return self.closeAlert(alert);
              }
          };
          return alerts.push(alert);
      },
      closeAlert: function(alert) {
         return this.closeAlertIdx(alerts.indexOf(alert));
      },
      closeAlertIdx : function(index) {
         return alerts.splice(index, 1);
      },
      clear: function() {
           alerts = [];
      },
      getAlerts: function() {
          return alerts;
      }
 })