自定义指令

1、第一个参数是指令的名字，第二个参数任然应该使用一个数组，数组的最后一个元素是一个函数。定义指令的名字，应该使用驼峰命名法

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <title>Document</title>

   <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">

 </head>

 <body ng-app="demoApp">

   <!-- <newsButton></newsButton> -->

   <!-- <news-button></news-button> -->

   <!-- <div newsButton></div> -->

   <btn-primary></btn-primary>

   <btn-danger></btn-danger>

   <script src="bower_components/angular/angular.js"></script>

   <script>

     var demoApp = angular.module('demoApp', []);

     // 第一个参数是指令的名字，第二个参数任然应该使用一个数组，数组的最后一个元素是一个函数

     // 定义指令的名字，应该使用驼峰命名法

     demoApp.directive('newsButton', [function() {

       // 该函数应该返回一个指令对象

       return {

         template:'<input type="button" value="news" class="btn btn-lg btn-primary btn-block" />'

       };

     }]);

     // demoApp.directive('btnPrimary', [function() {

     //   return {

     //     template:'<input type="button" value="news" class="btn btn-primary" />'

     //   };

     // }]);

     // demoApp.directive('btnDanger', [function() {

     //   return {

     //     template:'<input type="button" value="news" class="btn btn-danger" />'

     //   };

     // }]);

     // demoApp.directive('btnSuccess', [function() {

     //   return {

     //     template:'<input type="button" value="news" class="btn btn-success" />'

     //   };

     // }]);

     demoApp.controller('DemoController', ['$scope', function($scope) {

       // $scope.xxxx=xxx;

       // $scope.do=function() {

       // };

       // $scope.$watch('',function(now,old) {

       // });

     }]);

   </script>

 </body>

 </html>

2、自定义一个面包屑导航

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <title>Document</title>

   <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">

 </head>

 <body ng-app="demoApp">

   <!-- <btn>itcast</btn> -->

   <div breadcrumb></div>

   <breadcrumb data=""></breadcrumb>

   <script src="bower_components/angular/angular.js"></script>

   <script>

     var demoApp = angular.module('demoApp', []);

     demoApp.directive('breadcrumb', [function() {

       // Runs during compile

       return {

         // 指定当前指令的类型什么样的

         // restrict: 'EA',

         // // E = Element, A = Attribute, C = Class, M = Comment

         // template: '', // 模版字符串

         templateUrl: 'tmpls/breadcrumb.html',

         replace: true,

         // transclude: true,

       };

     }]);

     // demoApp.directive('btn', [function() {

     //   return{

     //     scope:{

     //       primary:'@',

     //       lg:'@',

     //       block:'@',

     //     },

     //     template:'<button class="btn {{primary==\'true\'?\'btn-primary\':\'\'}}">button</button>'

     //   }

     // }]);

     // demoApp.directive('btn', [function() {

     //   return {

     //     // 指令对象的transclude必须设置为true才可以在模版中使用ng-transclude指令

     //     transclude: true,

     //     replace: true, // 替换指令在HTML中绑定的元素

     //     template: '<button class="btn btn-primary btn-lg" ng-transclude></button>'

     //   };

     // }]);

   </script>

 </body>

 </html>

3、面包屑导航

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <title>封装一个面包屑导航</title>

   <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">

 </head>

 <body ng-app="myApp" ng-controller="DemoController">

   <breadcrumb data="{{pathData1}}"></breadcrumb>

   <breadcrumb data="{{pathData2}}"></breadcrumb>

   <script src="bower_components/angular/angular.js"></script>

   <script>

     var myApp = angular.module('myApp', []);

     myApp.controller('DemoController', ['$scope', function($scope) {

       $scope.pathData1 = {

         home: '#',

         news: '#',

         itheima: '#',

         bbs: '#'

       };

       $scope.pathData2 = {

         home: '#',

         library: '#',

         data: '#'

       };

     }]);

     // 定义一个面包屑导航指令

     myApp.directive('breadcrumb', [function() {

       // 返回指令对象

       return {

         scope: {},

         templateUrl: 'tmpls/breadcrumb.html',

         replace: true,

         link: function(scope, element, attributes) {

           scope.data = JSON.parse(attributes.data);

           // console.log(scope.data);

         }

       };

     }]);

   </script>

 </body>

 </html>

第216天：Angular---自定义指令（二）的更多相关文章

  1. Angular自定义指令（directive）

    angular自定义指令,意我们可以通过angula自己定义指令,来实现我们的特殊要求,为所欲为,一支穿云箭,千军万马来相见 多少年的老规矩了,先看代码: <!DOCTYPE html> ...

  2. angular 自定义指令详解 Directive

    在angular中,Directive,自定义指令的学习,可以更好的理解angular指令的原理,当angular的指令不能满足你的需求的时候,嘿嘿,你就可以来看看这篇文章,自定义自己的指令,可以满足 ...

  3. Angular自定义指令directive:scope属性

    在AngularJS中,除了内置指令如ng-click等,我们还可以自定义指令.自定义指令,是为了扩展DOM元素的功能.代码中,通过指定directive中的restrict属性,来决定这个指令是作为 ...

  4. angular 自定义指令 directive transclude 理解

    项目中断断续续的用了下angular,也没狠下心 认真的学习.angular 特别是自定义指令这块 空白. transclude 定义是否将当前元素的内容转移到模板中.看解释有点抽象. 看解释有点抽象 ...

  5. Angular17 Angular自定义指令

    1 什么是HTML HTML文档就是一个纯文本文件,该文件包含了HTML元素.CSS样式以及JavaScript代码:HTML元素是由标签呈现,浏览器会为每个标签创建带有属性的DOM对象,浏览器通过渲 ...

  6. angular自定义指令

    1.在directive文件下创建指令的js文件 通常自定义指令需要声明模块(注意定义指令时, js内部指令名称需采用 aaAaBb驼峰的命名方式  html中使用的是aa-aa-bb) e.g (f ...

  7. angular -- 自定义指令和模板

    angular 可以自定义一些指令,来简化我们前端的工作量. 第一种:简单指令示例: <h3>自定义指令</h3> <sheng></sheng> &l ...

  8. angular自定义指令命名的那个坑

    Directive 先从定义一个简单的指令开始. 定义一个指令本质上是在HTML中通过元素.属性.类或注释来添加功能.AngularJS的内置指令都是以ng开头,如果想自定义指令,建议自定义一个前缀代 ...

  9. angular自定义指令相关知识及代码

    原文地址 https://www.jianshu.com/p/0c015862156d 大纲 1.自定义指令之——属性指令 2.自定义属性指令的运行原理 3.自定义属性指令代码实践 4.自定义结构指令 ...

  10. angular自定义指令 repeat 循环结束事件；limitTo限制循环长度、限定开始位置

    1.获取repeat循环结束: 自定义指令: .directive('repeatFinish', function () { return { link: function (scope, elem ...

随机推荐

  1. 使用jquery ajax代替iframe

    大家在实际编写网页时可能会遇到网页中需要嵌套网页的情况,这时候通常想法就是通过iframe标签. 但实际用过的人都知道其有种种的不方便,比较直观的问题就是iframe的自适应高度,这也是处理起来比较麻 ...

  2. WinForm 捕获系统关机、重启、注销事件

    Public Class App Public Shared Sub Main() ' 关联事件 AddHandler Microsoft.Win32.SystemEvents.SessionEndi ...

  3. Linux学习之常用系统工作命令(一)

     由于centos和RHEL互通,两个版本可以相互学习,所以截图有两个界面 Linux系统与win系列是两个几乎完全不同的操作系统,但是就应用范围来说,是win系统更胜一筹,然而,这反而也成为win系 ...

  4. Jmeter关联处理

    采桑子·重阳 人生易老天难老, 岁岁重阳. 今又重阳, 战地黄花分外香. 一年一度秋风劲, 不似春光. 胜似春光, 廖廓江天万里霜. 当请求之间有依赖关系,比如一个请求的入参是另一个请求返回的数据,这 ...

  5. Vue Cli 中使用 Karma / Chrome 执行样式相关单元测试

    在 GearCase 开源项目 中,我使用了 Vue Cli 的默认测试框架.因此和样式相关的东西,都无法进行测试.因为它并不类似于无头浏览器,而是存在于虚拟内存之中. 现状 在如下 button.s ...

  6. RAID中条带的概念

    raid把数据分成条带,一个条带横跨所有数据磁盘,每个磁盘上存储条带的一部分,称为sagment,也称为条带深度.一个条带包含的扇区或块的个数,称为条带长度. raid向操作系统提供的是卷,是连续的扇 ...

  7. Sentence | Never underestimate yourself.

    "\(Our\) \(deepest\) \(fear\) \(is\) \(not\) \(that\) \(we\) \(are\) $inadequate. $ \(Our\) \(d ...

  8. DenseNet——Densely Connected Convolutional Networks

    1. 摘要 传统的 L 层神经网络只有 L 个连接,DenseNet 的结构则有 L(L+1)/2 个连接,每一层都和前面的所有层进行连接,所以称之为密集连接的网络. 针对每一层网络,其前面所有层的特 ...

  9. 点斜杠 & 如何查看linux程序安装位置 dpkg -L yyy

    方法1: sudo find / -name ssh 方法2: Ubuntu下 看应用程序安装路径的方法 ubuntu下dpkg -L xxx看应用程序安装路径 1.点斜杠 “./”就代表在当前目录下 ...

  10. url的param与dict转换

    urllib.parse.urlencode urlencode from urllib import parse from urllib.request import urlopen from ur ...