my-directive为指令名称,thisdata为绑定的数据

 <span ng-repeat="act in move.casts" style="position:relative">
<my-directive thisdata="act">
</my-directive>
<img src="" alt="" class="pic" >
</span>

app.directive('myDirective',function(){
return {
restrict:'EA',
template:'<span>{{thisdata.name}}</span>', //thisdata表示act
scope:{
thisdata:"=" //"="表示双向绑定数据
},
replace:false,
link:function (scope,element,attr) { //scope一个自定义的子作用域,element表示当前控制的元素
element.mouseenter(function () {
this.nextSibling.nextSibling.src=scope.thisdata.avatars.small;
});
element.mouseleave(function(){
this.nextSibling.nextSibling.src="";
});
} }
}); //自定义指令的3种绑定策略
“@”与父级作用域进行单项绑定
“=”与父级作用域进行双向绑定
“&”将子作用域与父作用域的方法进行绑定,子作用域可以使用父作用域的方法

  

angularjs自定义指令的更多相关文章

  1. AngularJs自定义指令详解(1) - restrict

    下面所有例子都使用angular-1.3.16.下载地址:http://cdn.bootcss.com/angular.js/1.3.16/angular.min.js 既然AngularJs快要发布 ...

  2. AngularJS: 自定义指令与控制器数据交互

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 浅析AngularJS自定义指令之嵌入(transclude)

    AngularJS自定义指令的嵌入功能与vue的插槽十分类似,都可以实现一些自定义内容展现.在开始之前先简单介绍下自定义指令的transclude属性和AngularJS的内置指令ng-transcl ...

  4. angularjs自定义指令Directive

    今天学习angularjs自定义指令Directive.Directive是一个非常棒的功能.可以实现我们自义的的功能方法. 下面的例子是演示用户在文本框输入的帐号是否为管理员的帐号"Adm ...

  5. angularJs 自定义指令传值---父级与子级之间的通信

    angularJs自定义指令用法我忽略,之前有写过,这里只说一下父子级之间如何传值: 例如: 模块我定义为myApp,index.html定义 <my-html bol-val="bo ...

  6. AngularJs自定义指令详解(6) - controller、require

    在前面文章中提到一旦声明了require,则链接函数具有第四个参数:controller. 可见require和controller是配合使用的. 在自定义指令中使用controller,目的往往是要 ...

  7. angularJs自定义指令.directive==类似自定义标签

    创建自定义的指令 除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTML 元素上需要添加自定义指令名 ...

  8. angularJS——自定义指令

    主要介绍指令定义的选项配置 //angular指令的定义,myDirective ,使用驼峰命名法 angular.module('myApp', []) .directive('myDirectiv ...

  9. AngularJS自定义指令(Directives)在IE8下的一个坑

    在项目中,由于要兼容到IE8,我使用1.2.8版本的angularJS.这个版本是支持自定义指令的.我打算使用自定义指令将顶部的header从其他页面分离.也就是实现在需要header的页面只用在&l ...

  10. 利用angularJs自定义指令(directive)实现在页面某一部分内滑块随着滚动条上下滑动

    最近老大让我一个效果实现在页面某一部分内滑块随着滚动条上下滑动,说明一下我们项目使用技术angularJs.大家都知道,使用jquery很好实现. 那么angular如何实现呢,我用的是自定义指令(d ...

随机推荐

  1. git操作笔记

    首先本文参考廖雪峰的git学习教程,写的非常好,值得学习. http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b80 ...

  2. Swift_UI_UIButton

    class ViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() // 1. 自定义 ...

  3. python 列表排序

    转自http://www.iplaypython.com/jinjie/jj114.html reverse()方法 将列表中元素反转排序,比如下面这样>>> x = [1,5,2, ...

  4. cookie 的创建 得到 删除

    //设置cookie function setCookie(attr,value,time){ if(time){ var newtime=new Date(); newtime.setTime(ne ...

  5. funsioncharts的图表操作heatmap

    网址:http://www.fusioncharts.com/dev/chart-guide/heat-map-chart/introduction.html 以下只是假数据,目前还没有实现动态数据获 ...

  6. solr 4.4添加索引是新手容易遇到的问题

    solr 4.4添加索引是新手容易遇到的问题异常一.Exception in thread "main" java.lang.NoClassDefFoundError: org/a ...

  7. jQuery概述

    JQUERY   JS语法字典---网友总结 1.document.write(""); 输出语句2.JS中的注释为//3.传统的HTML文档顺序是:document->ht ...

  8. easyui datagride 两种查询方式

    easyui datagride 两种查询方式function doReseach() { //$('#tt').datagrid('load', { // FixedCompany: $('.c_s ...

  9. PHP网页

    1.安装YUM源 2.安装httpd与PHP yum install httpd -y yum install php -y 3.进入htmi文件中 cd /var/www/html/ 4.将自己编写 ...

  10. Linux and the Device Tree

    来之\kernel\Documentation\devicetree\usage-model.txt Linux and the Device Tree ----------------------- ...