Question

我在我的webapp中使用Twitter Bootstrap for UI。特别是它的Alert组件。我想编写一个简单的角度服务来包装Bootstrap的Alert，以便有可能通知用户任何角度代码的安静。像这样：

Informer.inform("message", "ERROR"); // will result in alerting with `alert-error` class
Informer.inform("message", "INFO"); // will result in alerting with `alert-info` class

我的想法是将模板附加到<body>：

的末尾

<div class="alert {{alertClass}} fade in informer" id="informer">
    <button type="button" class="close" data-dismiss="alert">×</button>
    <div class="valignCenterWrapper">
        <div class="valignCenter" id="informerMessage">
            {{message}}
        </div>
    </div>
</div>

这样的事情：

grfx.factory("Informer", function() {
    return {
        inform : function(message, type) {
            // Here be dragons. How can I compile/append the template.

            $("#inform").alert();
        }
    };
});

我唯一想知道的是：如何使用angular来编写它，而不是使用jQuery？上面的代码是否适合开始？互联网中的人说我应该仅使用指令进行DOM操作。但我不明白：我没有任何现有的标记来应用它的指令。由于某些compupations /用户交互，警报将附加到页面。我应该使用哪些服务（$compile，$parse，$document）来编译temlate并将其附加到正文中？

编辑：是否也可以在控制器之外获取angularjs服务。只是在常规JS代码中，所以我可以写getServiece("Informer").inform("", "")？

编辑2 ：好的，我现在拥有的：

grfx.factory("Informer", function($compile, $rootScope) {
    return {
        inform : function(message, type) {
            var scope = $rootScope.$new();

            scope.message = message;
            scope.type = type;

            $(document.body).append($compile("<div class='alert {{type}} fade in informer' id='informer'><button type='button' class='close' data-dismiss='alert'>×</button><div class='valignCenterWrapper'><div class='valignCenter' id='informerMessage'>{{message}}</div></div></div>")(scope));
        }
    };
});

使用此代码，我可以使用来自控制器的注入服务。但是当我尝试在角度代码之外调用服务时会出现问题：

angular.element(document).injector().get("Informer").inform("Message", "alert-error");

这会显示包含{{message}}的弹出窗口，例如它无法正确编译模板。

Answer 1

在AngularJS中，我们应该专注于模型操作，你的Informer服务也不例外 - 它应该只持有模型，不应该关注DOM操作。 DOM操作=指令的经验法则非常好，如果你遵循它，它将为你节省很多麻烦。

回到你手头的问题，解决方案是让服务专注于模型操作和指令来显示这个模型。让我们从服务开始：

app.factory('Informer', function(){

  var messages = [];  
  var Informer = {};

  Informer.inform = function(msg, type) {
    messages.push({
      msg: msg,
      type: type
    });
  };

  Informer.allInfos = function() {
    return messages;
  };

  Informer.remove = function(info) {
    messages.splice(messages.indexOf(info), 1);
  };  

  return Informer;
});

当此服务准备就绪时，您可以轻松地在控制器中使用它（甚至在其他服务中！）：

app.controller('MainCtrl', function($scope, Informer) {

  Informer.inform("error message", "error");
  Informer.inform("info message", "info");

  $scope.allInfos = Informer.allInfos;  
  $scope.remove = Informer.remove;
});

最后，要呈现警报，您可以直接使用bootstrap的标记，或者编写一个封装它的非常简单的指令。我在这里使用http://angular-ui.github.com/bootstrap/

中的警告指令

<body ng-controller="MainCtrl">
    <alert ng-repeat="alert in allInfos()" type="alert.type" close="remove(alert)">{{alert.msg}}</alert>
  </body>

当然，您不需要使用此存储库中的指令，您可以根据需要创建自己的指令或使用原始标记。

以下是一个展示工作示例的傻瓜：http://plnkr.co/edit/VxAcjHFhxXODFB5iAfyX?p=preview

总结一下：

根据经验，不要在指令之外进行DOM操作
处理模型的服务应与模型的呈现

我还建议在学习 AngularJS时从项目中删除jQuery。这样你就可以更快地进入AngularJS-zen状态！

Answer 2

我认为，角度方式是尽可能少地用手操纵dom。即使你必须操纵它 - 只能在指令中进行操作。

所以，与jQuery不同的是，要有一个模型并使用绑定来改变你的dom。

出于这个原因，我选择的方式 - 它有一些在布局模板中某处绑定的InformerController，并迭代一组当前通知，并直接绘制。

app.controller('InformersController', function($scope, InformerService) {
    $scope.informs = InformerService.get();
    $scope.close = function (index) {
          InformerService.close(index)
    }
});

在你的模板中：

<div ng-controller="InformersController">
     <div ng-repeat="inform in informs">
         <div class="alert {{inform.alertClass}} fade in informer">
            <button type="button" ng-click="close($index)" class="close">×</button>
            <div class="valignCenterWrapper">
                <div class="valignCenter">
                    {{inform.message}}
                </div>
            </div>
        </div>
     </div>
 </div>

如果您需要从任何地方显示一些警报，请使用它向您的控制器注入InformerService，并使用它添加数据。

app.service('InformerService', function () {

    var informs = [];
    this.get = function () {
        return informs;   
    };
    this.inform = function (message, type) {
        informs.push({
            alertClass: 'alert-' + type,
            message: message
        });
    }
    this.close = function (index) {
       informs.splice(index, 1);
    }

});

例如：

app.controller('SomeController', function($scope, InformerService) {
    $scope.doError = function (msg, type) {
        InformerService.inform(msg, type);
    };
});

在你的模板中：

<div class="well" ng-controller="SomeController">
    <button class="btn btn-danger" ng-click="doError('Hello', 'error')">Error</button>  
    <button class="btn btn-info" ng-click="doError('Hello', 'info')">Info</button>  
</div>

你可以在这个小提琴上一起看到它：http://jsfiddle.net/zc3YH/6/

AngularJS Informer服务

2 个答案: