【AngularJS学习笔记】封装一些简单的控件（封装成Html标签）

bootstrap有强大的指令系统，可以自定义一些属性，基本知识请移步：http://angularjs.cn/A00r  http://www.cnblogs.com/lvdabao/p/3391634.html

我参考这两篇文章所述，封装了bootstrap的alert和panel控件，现将代码简单的贴出来。

注：目前我对ng了解非常浅，没有关注细节，实现功能第一位，我觉得比较合适的学习路线是，先用起来，在用的过程中不断深入。

第一步：注册module

angular.module('app.directives', [])

第二步：定义指令

1.alert的封装，这个是最简单的了，只是div上面多了两个class而已

angular.module('app.directives', [])
    .directive('successtip', function () {
        return {
            restrict: 'E',
            template: '<div class="alert alert-success" role="alert" ng-transclude></div>',
            replace: true,
            transclude: true
        }

    })

2.panel的封装，特点：多层标签嵌套

特别注意的点是：ng-transclude，这个写到哪里，完了之后，你的标签中的内容就会填充在那个节点下面，比如panelheader的定义，用户将来使用时

<panelheader>content</panelheader>,这里的content会填充到h3下面，而不是div下面.

.directive('panel', function () {
        return {
            restrict: 'E',
            template: '<div class="panel panel-danger" ng-transclude></div>',
            replace: true,
            transclude: true
        }
    })
    .directive('panelheader', function () {
        return {
            restrict: 'E',
            template: '<div class="panel-heading"><h3 class="panel-title" ng-transclude></h3></div>',
            replace: true,
            transclude: true
        }
    })
    .directive('panelbody', function () {
        return {
            restrict: 'E',
            template: ' <div class="panel-body" ng-transclude></div>',
            replace: true,
            transclude: true
        }
    });

如果你的模板比较复杂，不适合用一个string来写，那你可以用html模板来放置，只是在directive方法中，你就不能写template了，而是要写templateurl,路径是你定义的html模板的路径。

第三步:使用

这个时候，使用起来就不需要记那些繁琐的css和div的层级结构了，只需要记住标签的层级结构就好，这样子我个人的感觉是有点面向对象编程的意思了，比较容易理解和记忆。

1.alert的使用

<successtip>登录成功</successtip>

显示效果：

2.panel的使用

 <panel>
     <panelheader> panel healer</panelheader>
      <panelbody>panel Body</panelbody>
 </panel>

显示效果：

对于一些复杂的控件，这个封装就会大大减少开发工作量，我这个目前还是有问题的，我现在是每个颜色都需要封装一次，我觉得是会有办法在上面加个属性能让他们显示为不同颜色的。待续...