[关闭]
@dreamapplehappy 2014-12-18T17:37:41.000000Z 字数 2139 阅读 2931

用AngularJS构建自己的组件[原创]

angularjs 组件

先看演示地址吧expander-demo

介绍优点：

准备工作：

关于expander.html

先看代码吧：

  1. /*---ng-app表示angularjs程序的开始---*/
  2. <html lang="en" ng-app="myModule">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Expander</title>
  6.     /*---引入外部的bootstrap文件和expander.css文件---*/
  7.     <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
  8.     <link rel="stylesheet" href="expander.css">
  9.     /*---引入angularjs文件和外部的expander.js文件---*/
  10.     <script src="angular.min.js"></script>
  11.     <script src="expander.js"></script>
  12. </head>
  13. /*---控制器myController控制整个body---*/
  14. <body ng-controller="myController">
  15.     <div class="container">
  16.         <expander-container>
  17.             <expander  ng-repeat="expander in expanders"  expander-title="expander.title">{{expander.text}}</expander>
  18.         </expander-container>
  19.     </div>
  20. </body>
  21. </html>

更多细节的讲解：

关于expander.js

先看代码吧

  1. /*声明自己的模块myModule*/
  2. var myModule = angular.module('myModule', []);
  3. myModule.controller('myController', ['$scope', function($scope){
  4.     $scope.expanders = [
  5.     {title: 'Hello World', text: '是不是除了Hello World，你什么也不会写？'},
  6.     {title: 'Emberjs', text: 'AngularJS很厉害吗？我不觉得。-Emberjs'},
  7.     {title: 'AngularJS', text: '楼上说话要注意一点!'}
  8.     ];
  9. }]);
  10. myModule.directive('expanderContainer', function(){
  11.     return {
  12.         restrict: 'AE',
  13.         template: '<div ng-transclude></div>',
  14.         replace: true,
  15.         transclude: true,
  16.         controller: function(){
  17.             /*声明一个数组，用来存放下面expander指令生成的内容*/
  18.             var expanders = [];
  19.             /*添加expander指令生成的内容*/
  20.             this.addExpander = function(expander){
  21.                 expanders.push(expander);
  22.             }
  23.             /*对选择中的expander进行一些操作*/
  24.             this.getOpend = function(selectedExpander){
  25.                 angular.forEach(expanders, function(expander){
  26.                     if(selectedExpander != expander){
  27.                         expander.show = false;
  28.                     }
  29.                 });
  30.             }
  32.         }
  33.     };
  34. });
  35. myModule.directive('expander', function(){
  36.     return {
  37.     /*作用域的绑定*/
  38.         scope: {title: '=expanderTitle'},
  39.     /*声明依赖*/
  40.         require: '^?expanderContainer',
  41.         restrict: 'AE',
  42.         template: '<div>'+
  43.                 '<div class="title" ng-click="toggle()">{{title}}</div>'+
  44.                 '<div class="text" ng-show="show" ng-transclude></div>'+
  45.                 '</div>',
  46.         replace: true,
  47.         transclude: true,
  48.     /*在连接阶段进行操作*/
  49.         link: function(scope, iElm, iAttrs, controller) {
  50.             scope.show = false;
  52.             controller.addExpander(scope);
  54.             scope.toggle = function toggle(){
  55.                 scope.show = !scope.show;
  56.                 controller.getOpend(scope);
  57.             }
  58.         }
  59.     };
  60. });
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注