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. javascript最容易混淆的作用域、提升、闭包

    一.函数作用域 1.函数作用域 就是作用域在一个“Function”里,属于这个函数的全部变量都可以在整个函数的范围内使用及复用. function foo(a) { var b = 2; funct ...

  2. Google java style

    这里主要是记录关于java style的笔记. 1,Google的. 博客链接(中文):http://www.cnblogs.com/lanxuezaipiao/p/3534447.html. 官方链 ...

  3. Tomcat配置文件server.xml详解

    <?xml version='1.0' encoding='utf-8'?> <Server port="8005" shutdown="SHUTDOW ...

  4. phpcms模块开发简易教程

    简介: 在phpcms中,各个功能是以模块为单位定义的(对应modules目录),如果需要新增功能最好的办法就是开发一个模块,然后复制到phpcms目录下,然后进入后台安装即可. 官方说明: phpc ...

  5. python——有限状态机

    前言 使用Python,大部分时间花在了处理文本上.在处理文本的时候,如果对有限状态机有所了解的话,处理起来会更加得心应手.可以把文本看成一个流,然后有一个机器对这个流进行操作.这个机器有状态,不同的 ...

  6. HTML——meta标签

    <meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词. <meta> 标签位于文档的头部,不包含任何内容.&l ...

  7. 外键约束 以及 数据库中实体的对应关系（1==1，1==n,n==n）

    1.1.1 外键约束 Create database day16; Use day16; 创建部门表: create table dept( did int primary key auto_incr ...

  8. iOS UIViewController 和 nib 相关的3个方法

    iOS UIViewController 的 awakeFromNib 以及 - (id)initWithCoder:(NSCoder *)aDecoder 和 - (instancetype)ini ...

  9. string literals may have at most 255 elements

    一行中的字符超出 255 时候发生这个错误 解决方式: 一行的字符串分成两行 并 + 连接 **** 将字符串分成两个用"+"连接起来

  10. yii框架详解 之 国际化 (I18N)

    我们要开启组件中们关于语言的配置,默认的就是CPhpMessageSource,也可以改为其他的方式. #组件配置中  'messages' => array(     'class'=> ...