Question

我正在尝试在我的Angular应用中创建一个开发者控制台，我遇到了以下问题。

在我的应用程序的每个页面上，我希望我的开发人员控制台可用（就像屏幕一角的漂浮物）。我有HTML模板，我正在使用ui-view切换内容。我的控制器可以包含consoleService，然后调用类似myConsole.log(...)的内容。此函数应将消息添加到某个阵列，然后在Web上显示。对于我的控制台，我有HTML模板的指令，我想使用ng-repeat来显示所有消息。

现在我的问题。我该如何设计呢？我这样想：

第一种解决方案

好吧，我可以创建全局JS变量，在那里存储所有消息，然后使用<script>并在我的指令模板中编写em。

错误！不尊重Angular-way of things

第二种解决方案

好吧，我将使用$ scope并将我的消息放在那里，然后我可以使用那个神奇的Angular数据绑定让它自己运行。好的，但在这里我有一个问题，我怎样才能将$ scope注入我的服务？

错误！将$ scope注入服务是无稽之谈，因为它没有任何意义，再次，它有点反对Angular-way。

第三种解决方案

很好，让我的消息存储在控制台服务上，因为Angular中的所有服务都是单例，它应该工作得很好，但是...服务中没有$ scope，所以我需要将这个消息数组返回给控制器，然后将其分配给控制器中的$ scope。

??? 您怎么看？我在这个解决方案中遇到的问题是，在每个控制器中，我需要将消息数组分配给$ scope，我只是不想这样做，因为我需要在每个页面上的所有控制台。

我希望我对我想做的事情的解释是明确的，所以我只是希望提供一些暗示，或者建议如何在Angular中设计它。

Answer 1

使用第三种解决方案。您的服务将包含一个包含所有消息的数组，并且每个控制器都可以使用其中一个函数（service.log(...)），这基本上只是将一条消息添加到服务列表中。

然后在您的指令上，您只需将getMessages分配给指令范围：

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

app.service('log', function(){
  var messages = [];
  return {
    getMessages: function() { return messages; },
    logMessage: function(msg) { messages.push(msg); }
  }
})

app.controller('MainCtrl', function($scope, log) {
  $scope.msg = '';

  $scope.addMessage = function() {
    log.logMessage($scope.msg);
  };
});

app.directive('console', function(log) {
  return {
    restrict: "E",
    scope: {},
    replace: true,
    template: "<div><div ng-repeat='msg in messages'>{{msg}}</div></div>",
    link: function(scope, el, attr) {
      scope.messages = log.getMessages();
    }
  };
});

plunker：http://plnkr.co/edit/Q2g3jBfrlgGQROsTz4Nn?p=preview

在指令和服务中使用范围

第一种解决方案

第二种解决方案

第三种解决方案

1 个答案: