发布于 2015-12-14 23:54:32 | 310 次阅读 | 评论: 0 | 来源: PHPERZ

这里有新鲜出炉的AngularJS开发指南，程序狗速度看过来！

AngularJS 前端JS框架

AngularJS诞生于Google是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入，等等。

---

前言

想给项目中添加一个全局提示，发现这本书里刚好有这个例子：《用angularjs开发下一代web应用》，就直接拿来用了，下面把代码简单总结一下，同时也发现coding.net和worktile上的全局提示效果也类似，以后研究一下看有什么不同也总结到这里咯

啥样

就直接用bs的警告框啦~，Duang~

功能

• 可以设置message和type，type就是bs内置的几种颜色

• 默认提示3秒框自动关闭，或者点击x号关闭

代码

模板

<div class="alert alert-{{type || 'info'}}" ng-show="message">
    <button type="button" class="close"  ng-click="hideAlert()">
        <span class="glyphicon glyphicon-remove"></span>
    </button>
    {{message}}
</div>

指令

/**
 * 提示框
 */
commonToolDirectives.directive('alertBar',[function(){

  return {
    restrict: 'EA',
    templateUrl: 'src/common/views/alertBar.html',
    scope : {
      message : "=",
      type : "="
    },
    link: function(scope, element, attrs){

      scope.hideAlert = function() {
        scope.message = null;
        scope.type = null;
      };

    }
  };
}]);

服务

/**
 * 提示框数据
 */
commonServices.factory('TipService', ['$timeout', function($timeout) {
  return {
    message : null,
    type : null,
    setMessage : function(msg,type){

      this.message = msg;
      this.type = type;

      //提示框显示最多3秒消失
      var _self = this;
      $timeout(function(){
        _self.clear();
      },3000);
    },
    clear : function(){
      this.message = null;
      this.type = null;
    }
  };
}]);

用法

1. 因为是全局提示，所以就只有一个，在index.html中添加：

   <!--全局提示框-->
   <alert-bar class="alert_bar" message="tipService.message" type="tipService.type"></alert-bar>

   同时保证他的z-index最高

2. 然后因为需要在页面上直接访问tipService，需要在最外层controller（如果没有可以直接绑定到$rootScope)中绑定:

   //提示信息服务
   $scope.tipService = TipService;

3. 调用的时候在c中直接设置message和type就可以了

   TipService.setMessage('登录成功', 'success');

   当然从上面的模板代码可以看到，如果不传第二个参数，type默认是info，也就是那个蓝色的

效果

我的效果就是这样啦~

最后

东西比较少没有封装成ng模块，基本的需求可以实现，有机会还是要看看人家是怎么做这个全局提示的，嗯！