1.指令  transclude 保留原来的内容 replace 去掉<my-directive>指令

  1. <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
  2. <div ng-app="a">
  3.     <my-directive><div>这是原来的<p>this is p</p></div></my-directive>
  4. </div>
  5. <script>
  6.     var app = angular.module('a', []);
  7.     app.directive('myDirective', function () {
  8.         return{
  9.             template:'<div>this is directive<div ng-transclude=""></div></div>',
  10.             transclude:true,
  11.             replace:true
  12.         }
  13.     });
  14. </script>

2.指令绑定函数

  1. <body ng-app="a">
  2. <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
  3. <div  ng-controller="ctrl1">
  4.     <my-directive>鼠标移上来</my-directive>
  5. </div>
  6. <!--指令绑定函数 ，借助 link -->
  7. <script>
  8.     var app = angular.module('a', []);
  9.     app.controller('ctrl1', function ($scope) {
  10.         $scope.load= function () {
  11.             console.log("loading..");
  12.         }
  13.     })
  14.     app.directive('myDirective', function () {
  15.         return{
  16.             link: function (scope,element,attrs) {
  17.                 element.bind('mouseover', function () {
  18.                   //  scope.load();
  19.                     scope.$apply("load()");   // 两种方式
  20.                 })
  21.             }
  22.         }
  23.     });
  24. </script>

3.指令复用，绑定不同函数

  1. <body ng-app="a">
  2.  
  3. <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
  4. <div  ng-controller="ctrl1">
  5.     <my-directive howToLoad="load()">鼠标移上来1</my-directive>
  6. </div>
  7. <div  ng-controller="ctrl2">
  8.     <my-directive howToLoad="load2()">鼠标移上来2</my-directive>
  9. </div>
  10. <!--指令复用，绑定不同函数 ，要添加不同属性 howToLoad -->
  11. <script>
  12.     var app = angular.module('a', []);
  13.     app.controller('ctrl1', function ($scope) {
  14.         $scope.load= function () {
  15.             console.log("loading..");
  16.         }
  17.     })
  18.     app.controller('ctrl2', function ($scope) {
  19.         $scope.load2= function () {
  20.             console.log("loading.22.");
  21.         }
  22.     })
  23.     app.directive('myDirective', function () {
  24.         return{
  25.             link: function (scope,element,attrs) {
  26.                 element.bind('mouseover', function () {
  27.                     scope.$apply(attrs.howtoload);
  28.                 })
  29.             }
  30.         }
  31.     });
  32. </script>

4.独立指令  $scope:{} 使每个复用的hello指令不受影响，在第一个hello输入值时，第二个hello不受影响

  1. <body ng-app="a">
  2. <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
  3. <hello></hello><br/>
  4. <hello></hello>
  5. <script>
  6.     var app = angular.module('a', []);
  7.     app.directive('hello', function () {
  8.         return{
  9.             template:'<input type="text" ng-model="name">{{name}}',
  10.             scope:{}
  11.         }
  12.     })
  13. </script>

5.指令scope @

  1. <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
  2. 隔离作用域中把 myText同dom中的your-text属性绑定
  3. <div ng-app="a">
  4.     <hello url="http://www.baidu.com" your-text="sohu"></hello>
  5. </div>
  6. <script>
  7. var app=angular.module('a',[]);
  8.     app.directive('hello', function () {
  9.         return{
  10.             template:'<div><a href="{{url}}">{{myText}}</a></div>',
  11.             replace:true,
  12.             scope:{
  13.                 myText:'@yourText',
  14.                 url:'@'
  15.             }
  16.         }
  17.     })
  18. </script>

angularjs实战的更多相关文章

  1. AngularJS实战之Controller之间的通信

    我们时常会在不同controller之间进行通信,接下来就介绍三种controller之间的通信方式 一.使用$on.$emit和$broadcast进行controller通信 虽然AngularJ ...

  2. AngularJS实战项目（Ⅰ）--含源码

    前言 钻研ABP框架的日子,遇到了很多新的知识,因为对自己而言是新知识,所以经常卡在很多地方,迟迟不能有所突破,作为一个稍有上进心的程序员,内心绝对是不服输的,也绝对是不畏困难的,心底必然有这样一股力 ...

  3. AngularJs学习笔记-慕课网AngularJS实战

    第1章 快速上手 放弃了IE8以及以下,不支持. 4大核心特性: 1.MVC Model: 数据模型 View:视图 Controller:业务逻辑和控制逻辑 好处:职责清晰,模块化. 2.模块化 3 ...

  4. AngularJS 实战讲义笔记

    第一部分 快速上手 1.1 感受AngularJs四大核心特性(MVC, 模块化,指令系统,双向数据绑定)1.2 搭建自动化的前端开发,调试,测试环境 代码编辑工具 (sublime) 断点调试工具 ...

  5. [置顶] AngularJS实战之路由ui-sref-active使用

    当我们使用angularjs的路由时,时常会出现一个需求,当选中菜单时把当前菜单的样式设置为选中状态(多数就是改变颜色) 接下来就看看Angular-UI-Router里的指令ui-sref-acti ...

  6. 《AngularJs实战》学习笔记(慕课网)

    1. Controller使用过程中的注意点 不要试图去复用Controller, 一个控制器一般只负责一小块视图 不要在Controller中操作DOM, 这不是控制器的职责. 封装在指令里. 不要 ...

  7. angularJS实战（一）

    angular实现列表 accessCtrl.js let AccessCtrl = function($scope, AlertService, DialogService, BigDataServ ...

  8. AngularJS实战之cookie的读取

    <!DOCTYPE html> <html ng-controller="cookies_controller"> <head> <tit ...

  9. AngularJS实战之ngAnimate插件实现轮播

    第一步:引入angular-animate.js 第二步:注入ngAnimate var lxApp = angular.module("lxApp", [ 'ngAnimate' ...

随机推荐

  1. centos 本地dns配置

    折腾了差不多两天,看了不少中文,英文文档.终于搞定,记录下心得.本文只讨论正向解析. 安装 ============= yum install bind 全局配置 ========= 由于只是做本地d ...

  2. NGUI图片闪光

    先上效果 Shader Shader "Unlit/Transparent Colored Flow Texture" { Properties { _MainTex (" ...

  3. bind+dlz+mysql实现区域记录动态更新

    BIND-DLZ实验:http://bind-dlz.sourceforge.net/ 实验环境:RHEL4,BIND-9.5.0-P2.tar.gz(9.4.0以上版本都已含DLZ补丁),Mysql ...

  4. SaltStack之Master配置文件详解

    salt-master的配置文件位于/etc/salt/master,可用选项如下: #######################主配置 interface默认值:0.0.0.0(所有的网络地址接口 ...

  5. nyoj925_国王的烦恼_并查集

    国王的烦恼 时间限制:3000 ms  |  内存限制:65535 KB 难度:2   描述 C国由n个小岛组成,为了方便小岛之间联络,C国在小岛间建立了m座大桥,每座大桥连接两座小岛.两个小岛间可能 ...

  6. Greedy:Bound Found(POJ 2566)

       神奇密码 题目大意:就是给你一个数组,要你找出连续的数的绝对值的和最接近t的那一串,并且要找出数组的上界和下界的下标,并显示他们的和 因为这一题的数有正有负,所以必须要先把和求出来,然后排序,然 ...

  7. Spring mvc 文件上传到文件夹（转载+心得）

    spring mvc(注解)上传文件的简单例子,这有几个需要注意的地方1.form的enctype=”multipart/form-data” 这个是上传文件必须的2.applicationConte ...

  8. nohup后台运行jar

    nohup 用途:LINUX命令用法,不挂断地运行命令.  语法:nohup Command [ Arg ... ] [ & ]  描述:nohup 命令运行由 Command 参数和任何相关 ...

  9. 6. ZigZag Conversion

    题目: The string "PAYPALISHIRING" is written in a zigzag pattern on a given number of rows l ...

  10. object实现小老鼠交互

    直接使用 <p style="text-align: center; "> <object type="application/x-shockwave- ...