5

我在我的 web 应用程序中使用 Twitter Bootstrap 的 UI。特别是它的警报组件。我想编写一个简单的角度服务来包装 Bootstrap 的警报，以便有可能通知用户任何角度代码的和平。像这样：

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 操作。但我不明白：我没有任何现有的标记来应用指令。由于某些计算/用户交互，警报将附加到页面。我应该使用哪些服务（$compile, $parse, $document）来编译模板并将其附加到正文的某个位置？

编辑：是否也可以在控制器之外获得 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}}例如它没有正确编译模板。

4

2 回答 2

8

在 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;
});

最后，要呈现警报，您可以直接使用引导程序的标记，或者编写一个非常简单的指令来封装它。在这里，我使用来自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>

当然，您不需要使用此 repo 中的指令，如果需要，您可以创建自己的或使用原始标记。

这是一个演示工作示例的 plunker：http ://plnkr.co/edit/VxAcjHFhxXODFB5iAfyX?p=preview

总结一下：

  • 根据经验，不要在指令之外进行 DOM 操作
  • 处理模型的服务应该与模型的表示分离

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

于 2013-02-11T10:16:00.080 回答
3

我相信，角度方式是尽可能少地手动操作 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/

于 2013-02-11T09:31:30.823 回答