个人中心
gpt4 book ai didi

javascript - AngularJS:如何从服务向 dom 添加和编译指令

转载 作者：行者123 更新时间：2023-11-29 17:14:30 24 4
gpt4 key购买 nike

我认为我想做的事情相当简单，但我似乎无法使用 Angular 确定正确的架构。

我想要一个消息中心，这样任何 Controller 或其他 Angular 代码都可以添加消息。我认为执行此操作的正确方法是使用 MessageCenter 服务。我会在需要的地方注入(inject)服务，然后调用 MessageCenter.add()。我遇到的问题是如何编译克隆的 DOM 指令，因为 $compile 需要一个 $scope，而我没有从服务中获得它。

这是我正在尝试的。我不确定正确的方法是什么。

<div>
  <div id="msg-proto" message-center-msg class="alert alert-success"></div>
</div>

然后:

.factory('MessageCenter', function($compile) {
  var that = {}

  that.add = function(type, message) {
    var n = $("#msg-proto"),
        n2 =  n.clone();
    n.parent().append($compile(n2));
  }

  return that;
});

我正在注入(inject)并调用该服务:

.controller('SomeCtrl', function(MessageCenter) {
  MessageCenter.add('some msg');
});

我定义了一个 message-center-msg 指令，它向元素添加了一些行为。但它需要 $compile 才能实现，我不确定如何使这一切正常工作。我只会从服务中得到 “错误:需要参数 'scope'”。

我如何设置一个全局消息中心，它能够克隆/添加消息并处理消息 dom 元素上的指令？

最佳答案

您的服务不应像您尝试的那样直接与 DOM 交互。如果我要设计这样一个系统，我会:

  1. 有一个服务可以简单地接收消息并将它们放在一个数组中(如果你想支持整个消息列表)或者只记住最后一条消息(如果你只想支持一条消息)
  2. 有一个 Controller ，它获取注入(inject)到它的消息服务并将来自该服务的消息绑定(bind)到它的范围
  3. 然后有一些 HTML(或自定义指令)使用上述 Controller 迭代消息并显示它们

这就是我的意思(这里是 plunk:http://plnkr.co/Eps1Gy)

index.html:

<!doctype html>
<html>
  <head>
    <script src="bower_components/angular/angular.js"></script>
    <script src="scripts/app.js"></script>  
    <script src="scripts/controllers/messages.js"></script>
    <script src="scripts/controllers/click.js"></script>
    <script src="scripts/services/messageService.js"></script>
</head>
  <body ng-app="messagesApp">
    <h1>Messages</h1>
    <div ng-controller="MessagesCtrl"> 
      <ul  ng-repeat="message in messages">
        <li>{{message}}</li>
      </ul>
    </div>
    <a ng-href="#" ng-controller="ClickCtrl" ng-click="addMessage()" >Add a new message!</a>
  </body>
</html>

消息服务.js:

function MessageService() {
    this.messages = [];
    this.add = function(msg) {
        this.messages.push(msg);
    }
}

angular.module('messagesApp')
    .service('messageService', MessageService);

消息.js:

angular.module('messagesApp')
  .controller('MessagesCtrl', function ($scope, messageService) {
    $scope.messages = messageService.messages;
  });

点击.js:

angular.module('messagesApp')
  .controller('ClickCtrl', function ($scope, messageService) {
    var count = 0;

    $scope.addMessage = function() {
        messageService.add('Test message ' + count++);
    }
  });

应用程序.js:

angular.module('messagesApp', [])
  .config(function ($routeProvider) {
    $routeProvider
      .otherwise({
        redirectTo: '/'
      });
  });

就像我说的，如果您想要一些复杂的交互，您可以用自定义指令替换用于处理消息的 HTML，但重要的是您不要试图破坏服务的 View 。该服务应仅与定义明确的模型交互。

关于javascript - AngularJS:如何从服务向 dom 添加和编译指令，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19074995/

24 4 0
文章推荐： android - " not found"，仅在 C++ 模式下发生
文章推荐： Android图片大小困惑
文章推荐： php - MySQL使用另一个表中的值过滤一个表中的数据
文章推荐： android - 使用 Retrofit2 发送图像
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com