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. centos PIL 安装

    http://itekblog.com/centos-6-x-install-pil-python-imaging-library-tutorial/

  2. Docker 存储设置

    docker默认单个容器可以使用数据空间大小10GB,docker可用数据总空间100GB,元数据可用总空间2GB.用docker info信息可以查看Data Space Total.Metadat ...

  3. JSONP跨域的原理解析

    JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same- Origin Policy”(同源策略).这一策略对于Jav ...

  4. jquery实现input输入框实时输入触发事件代码 ---jQuery 中bind(),live(),delegate(),on() 区别

    复制代码 代码如下: <input id="productName" name="productName" value="" /> ...

  5. 警告: 程序集绑定日志记录被关闭(IIS7 64位系统)

    部署一个.NET程序在IIS7服务器,出现如下信息: 说明: 执行当前 Web 请求期间,出现未处理的异常.请检查堆栈跟踪信息,以了解有关该错误以及代码中导致错误的出处的详细信息. 异常详细信息: S ...

  6. Python批量修改文件名-后缀

    LyncLynn用途: 批量修改文件格式,文件名后缀. #Version: V1.0 #Author:lynclynn #Description:Change the filename #Create ...

  7. Xcode无法启动ios模拟器的问题

    一.问题描述 开发过程需要来回切换ios模拟器调试程序,开始在iPhone 4s下调试,然后切换到iPhone 6s Plus,再切换回iPhone 4s,遇到无法启动ios模拟器.错误提示如下: 二 ...

  8. HDU 5881 Tea -2016 ICPC 青岛赛区网络赛

    题目链接 题意:有一壶水, 体积在 L和 R之间, 有两个杯子, 你要把水倒到两个杯子里面, 使得杯子水体积几乎相同(体积的差值小于等于1), 并且使得壶里剩下水体积不大于1. 你无法测量壶里剩下水的 ...

  9. svn 默认忽略静态库 .a文件解决办法

    我也是在向SVN服务器上传文件时,遇到了这个问题,文件上传后,再下载后发现所有的.a文件全部丢失,后来才知道是上传文件的时候.a文件根本就没传上去,查找原因才知道上传的时候.a文件被过滤掉了,后来找到 ...

  10. Xcode添加注释

    VVDocumenter-Xcode,自动生成注释,感觉比较方便的插件,分享下,应该很多人都知道= = 在 https://github.com/onevcat/VVDocumenter-Xcode  ...