angular directive指令的复用
“指令之之所以要定义成指令就是为了复用!”
指令一定是可以用在不同的controller里面的,为了在不同的controller去使用它,我们一定要给指定的配置项一个指令。这样才能跟外面的控制器进行交互。
举例如下:
html:
<div ng-controller="MyCtrl">
<loader howToLoad="loadData()">滑动加载</loader>
</div>
<div ng-controller="MyCtrl2">
<loader howToLoad="loadData2()">滑动加载2</loader>
</div>
js:
var app = angular.module('MyModule',[]); app.controller('MyCtrl', ['$scope',function($scope){
$scope.loadData = function(){
console.log("加载数据中...");
}
}]); app.controller('MyCtrl2', ['$scope',function($scope){
$scope.loadData2 = function(){
console.log("加载数据中...2222");
}
}]); app.directive("loader",function(){
return{
restrict: "AE",
link:function(scope,element,attrs){ /*link函数有4个参数,最后一个父控制器,此处用了3个*/
element.bind('mouseenter',function(){
// scope.$apply("loadData()");
// 注意这里的坑,howtoload会被转换成小写的howtoload
scope.$apply(attrs.howtoload);
});
}
}
});
angular directive指令的复用的更多相关文章
- angular directive指令内的参数
angular.module('myApp', []) .directive('myDirective', function() { return { restrict: String, priori ...
- angular directive指令相互独立
想要让指令的使用相互间不干扰,如下:
- Angular之指令Directive系列
项目筹备近期开启Angular学习,指令比较难理解所以记录备案,推荐Angualr实战学习视频大漠穷秋 Angular实战 一.指令directive概述 指令可以对元素绑定事件监听或者改变DOM结构 ...
- Angular自定义指令(directive)
angular自定义指令,意我们可以通过angula自己定义指令,来实现我们的特殊要求,为所欲为,一支穿云箭,千军万马来相见 多少年的老规矩了,先看代码: <!DOCTYPE html> ...
- angular 自定义指令详解 Directive
在angular中,Directive,自定义指令的学习,可以更好的理解angular指令的原理,当angular的指令不能满足你的需求的时候,嘿嘿,你就可以来看看这篇文章,自定义自己的指令,可以满足 ...
- angular上传获取图片的directive指令
在AngularJS中,操作DOM一般在指令中完成,那么指令是如何实现的呢?指令的作用是把我们自定义的语义化标签替换成浏览器能够认识的HTML标签 一般的事件监听是在对静态的dom绑定事件,而如果在指 ...
- 学习AngularJs:Directive指令用法(完整版)
这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下 本教程使用AngularJs版本:1.5.3 AngularJs GitHub: http ...
- AngularJS中Directive指令系列 - 基本用法
参考: https://docs.angularjs.org/api/ng/service/$compile http://www.zouyesheng.com/angular.html Direct ...
- directive 指令一
什么是Directive Directive将一段html,js封装在一起,形成一个可以复用的独立个体,具有特定的功能.angularjs中的指令通常是比较小的组件,它相当于是给我们提供了一些公共的自 ...
随机推荐
- C#异步编程 z
http://www.cnblogs.com/fangyz/p/5134018.html 从.NET4.5开始,用async和await关键字再加上Task.Run是一个非常不错的异步编程模型. 1. ...
- 证书 pki
对称加密 symmetric cryptographic 非对称加密 asymmetric cryptographic 密钥交换协议 key agreement/exchang ...
- c# partial类
partial类就是说明这个类是写在几个文件里面的,这里只是一部分. partial是一个类修饰符,用于把类定义拆分为几个部分,便于代码管理,如class ClassA{void A(){;}void ...
- vmware虚拟机挂起后无法再恢复(转)
之前一直使用vmware调试程序,但有一天它被挂起后,就一直无法恢复. 提示: 无法获取该配置文件上的排他锁 另一个VMware进程可能正在使用此配置文件. 后来在google里查了一下,发现其实是一 ...
- C++学习32 重载new和delete运算符
内存管理运算符 new.new[].delete 和 delete[] 也可以进行重载,其重载形式既可以是类的成员函数,也可以是全局函数.一般情况下,内建的内存管理运算符就够用了,只有在需要自己管理内 ...
- 异步任务神器 Celery 简明笔记
转自:http://www.jianshu.com/p/1840035cb510 异步任务 异步任务是web开发中一个很常见的方法.对于一些耗时耗资源的操作,往往从主应用中隔离,通过异步的方式执行.简 ...
- C++primer 练习13.44
13.44:编写标准库string类的简化版本,命名为String.你的类应该至少有一个默认构造函数和一个接受C 风格字符串指针参数的构造函数.使用allocator为你的String类分配所需内存 ...
- JavaScript显示分页按钮
/** * 获取分页按钮 * @param total_page 总页数 * @param current_page 当前页 * @param num 每页显示多少个分页按钮 * @returns { ...
- transform的使用
*:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...
- EasyUI datagrid组件绑定有转义字符的json数据出错
最近项目中一个页面的datagrid出现了莫名其妙的问题, 首先是分页数据的第二页和第三页不能展示,过了一天后第一页也出不来了, 默认首页不出来导致后续分页处理无法进行, 整个数据都不出来了,最后只能 ...