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

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<div ng-app="a">
    <my-directive><div>这是原来的<p>this is p</p></div></my-directive>
</div>
<script>
    var app = angular.module('a', []);
    app.directive('myDirective', function () {
        return{
            template:'<div>this is directive<div ng-transclude=""></div></div>',
            transclude:true,
            replace:true
        }
    });
</script>

2.指令绑定函数

<body ng-app="a">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<div  ng-controller="ctrl1">
    <my-directive>鼠标移上来</my-directive>
</div>
<!--指令绑定函数 ，借助 link -->
<script>
    var app = angular.module('a', []);
    app.controller('ctrl1', function ($scope) {
        $scope.load= function () {
            console.log("loading..");
        }
    })
    app.directive('myDirective', function () {
        return{
            link: function (scope,element,attrs) {
                element.bind('mouseover', function () {
                  //  scope.load();
                    scope.$apply("load()");   // 两种方式
                })
            }
        }
    });
</script>

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

<body ng-app="a">

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<div  ng-controller="ctrl1">
    <my-directive howToLoad="load()">鼠标移上来1</my-directive>
</div>
<div  ng-controller="ctrl2">
    <my-directive howToLoad="load2()">鼠标移上来2</my-directive>
</div>
<!--指令复用，绑定不同函数 ，要添加不同属性 howToLoad -->
<script>
    var app = angular.module('a', []);
    app.controller('ctrl1', function ($scope) {
        $scope.load= function () {
            console.log("loading..");
        }
    })
    app.controller('ctrl2', function ($scope) {
        $scope.load2= function () {
            console.log("loading.22.");
        }
    })
    app.directive('myDirective', function () {
        return{
            link: function (scope,element,attrs) {
                element.bind('mouseover', function () {
                    scope.$apply(attrs.howtoload);
                })
            }
        }
    });
</script>

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

<body ng-app="a">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<hello></hello><br/>
<hello></hello>
<script>
    var app = angular.module('a', []);
    app.directive('hello', function () {
        return{
            template:'<input type="text" ng-model="name">{{name}}',
            scope:{}
        }
    })
</script>

5.指令scope @

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
隔离作用域中把 myText同dom中的your-text属性绑定
<div ng-app="a">
    <hello url="http://www.baidu.com" your-text="sohu"></hello>
</div>
<script>
var app=angular.module('a',[]);
    app.directive('hello', function () {
        return{
            template:'<div><a href="{{url}}">{{myText}}</a></div>',
            replace:true,
            scope:{
                myText:'@yourText',
                url:'@'
            }
        }
    })
</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. 【Java POI】POI基于事件驱动解析大数据量2007版本Excel，空值导致列错位问题

    1.目前测试了20M的文件,可以读取. 2.支持单个工作表1万+的数据行数,耗时如图. 3.以下是关键地方处理的代码 //Accepts objects needed while parsing. / ...

  2. vtigerCRM5.4的安装和汉化 ubuntu

    由于php5.5经过较大改变,安装vtigercrm的时候可能需要修改一些配置 1.去官网下载vtiger5.4压缩包,解压后放在/var/www目录下 2.简单起见,将目录权限设置为777 vtig ...

  3. HTML——选择器

    在前面的章节中,我们展示了一些有关如何选取 HTML 元素的实例. 关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元素. jQuery 元素选择器和属性选择器允许您通过标签名.属性 ...

  4. 【leetcode】Remove Duplicates from Sorted Array II

    Remove Duplicates from Sorted Array II Follow up for "Remove Duplicates":What if duplicate ...

  5. struts2 校验数据的有效性 2种方式

    Struts2的数据校验: 数据的校验分为客户端校验和服务器端两种: 客户端校验:JS完成的校验.(为了提升用户体验.减少用户的输入错误) 服务器端校验:在后台的校验.(必须的.) 手动编码进行校验: ...

  6. ios 在程序中使用iCloud

    注意,这里说的使用icould不是用icloud进行系统备份,那个功能不需要我们写代码,备份到icloud的东西我们也不能操作.我们指的是以下这3种icloud使用方法: 这里有3中使用方法, Key ...

  7. Zookeeper服务常用的操作命令

    Zookeeper服务安装之后,一般会在这个服务的基础之上安装其他的大数据平台,其他的框架一般会提供很多接口对Zookeeper中的内容进行一定的操作,但是功能相对单一,所以有些时候,有必要我们自己登 ...

  8. iOS - iPhone开发 UILocalNotification的使用

    OS下的Notification的使用 Notification 是智能手机应用编程中非常常用的一种传递信息的机制,而且可以非常好的节省资源,不用消耗资源来不停地检查信息状态(Pooling),在iO ...

  9. Delphi 2010 Can't load package C:\Programme\Afalinasoft\Add-in Express 2\d5units\adxwizardd5.bpl.

    "Can't load package C:\Programme\Afalinasoft\Add-in Express 2\d5units\adxwizardd5.bpl. Componen ...

  10. iOS MD5加密

    1.MD5加密 Message Digest Algorithm MD5(中文名为消息摘要算法第五版)为计算机安全领域广泛使用的一种散列函数,用以提供消息的完整性保护.该算法的文件号为RFC 1321 ...