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

bootstrap有强大的指令系统，可以自定义一些属性，基本知识请移步：http://angularjs.cn/A00r /article/4967239.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>

显示效果：



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