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. 1.7---将矩阵元素为0的行列清零0（CC150）

    答案: import java.util.ArrayList; import java.util.List; public class Solution{ public static void mai ...

  2. [黑科技]bit reverse

    写FFT的时候yy出来了这个bit reverse...时间复杂度O(n),常数大概是(a[x>>1]>>1)|((x&1)<<26)的二分之一(-O3下) ...

  3. (转) Lambda表达式中的表达式lambda和语句lambda区别

    Lambda表达式可分为表达式lambda和语句lambda 表达式lambda:表达式位于 => 运算符右侧的lambda表达式称为表达式lambda (input parameters) = ...

  4. (转)高性能网站架构之缓存篇—Redis集群搭建

    看过 高性能网站架构之缓存篇--Redis安装配置和高性能网站架构之缓存篇--Redis使用配置端口转发 这两篇文章的,相信你已经对redis有一定的了解,并能够安装上,进行简单的使用了,但是在咱们的 ...

  5. FastReport中文网

    FastReport中文网 http://www.fastreportcn.com/Article/2.html

  6. java web 学习 --第二天（Java三级考试）

    第一天的学习在这http://www.cnblogs.com/tobecrazy/p/3444474.html 2.jsp 基础知识 Jsp页面中的Java脚本主要有3部分:声明(Declaratio ...

  7. nyoj221_Tree_subsequent_traversal

    Tree 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 Little Valentine liked playing with binary trees very ...

  8. Mathematics:Raising Modulo Numbers(POJ 1995)

    阶乘总和 题目大意:要你算一堆阶乘对m的模... 大水题,对指数二分就可以了... #include <iostream> #include <functional> #inc ...

  9. 类中实现 Dispose And Finalize

    1.Dispose方法中,应该使用GC.SuppressFinalize防止GC调用Finalize方法,因为显示调用Dispose比较好. 2.Disposed字段保证了两次调用Dispose方法不 ...

  10. supersr--九宫格公式(根据多少行多少列排版)

    - (void)layoutSubviews{ [super layoutSubviews]; NSUInteger count = self.subviews.count; NSInteger ma ...