“指令之之所以要定义成指令就是为了复用!”

指令一定是可以用在不同的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指令的复用的更多相关文章

  1. angular directive指令内的参数

    angular.module('myApp', []) .directive('myDirective', function() { return { restrict: String, priori ...

  2. angular directive指令相互独立

    想要让指令的使用相互间不干扰,如下:

  3. Angular之指令Directive系列

    项目筹备近期开启Angular学习,指令比较难理解所以记录备案,推荐Angualr实战学习视频大漠穷秋 Angular实战 一.指令directive概述 指令可以对元素绑定事件监听或者改变DOM结构 ...

  4. Angular自定义指令(directive)

    angular自定义指令,意我们可以通过angula自己定义指令,来实现我们的特殊要求,为所欲为,一支穿云箭,千军万马来相见 多少年的老规矩了,先看代码: <!DOCTYPE html> ...

  5. angular 自定义指令详解 Directive

    在angular中,Directive,自定义指令的学习,可以更好的理解angular指令的原理,当angular的指令不能满足你的需求的时候,嘿嘿,你就可以来看看这篇文章,自定义自己的指令,可以满足 ...

  6. angular上传获取图片的directive指令

    在AngularJS中,操作DOM一般在指令中完成,那么指令是如何实现的呢?指令的作用是把我们自定义的语义化标签替换成浏览器能够认识的HTML标签 一般的事件监听是在对静态的dom绑定事件,而如果在指 ...

  7. 学习AngularJs:Directive指令用法(完整版)

    这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下   本教程使用AngularJs版本:1.5.3 AngularJs GitHub: http ...

  8. AngularJS中Directive指令系列 - 基本用法

    参考: https://docs.angularjs.org/api/ng/service/$compile http://www.zouyesheng.com/angular.html Direct ...

  9. directive 指令一

    什么是Directive Directive将一段html,js封装在一起,形成一个可以复用的独立个体,具有特定的功能.angularjs中的指令通常是比较小的组件,它相当于是给我们提供了一些公共的自 ...

随机推荐

  1. c++学习-多态性

    强制转换父类对象为子类 #include<iostream> #include<string> #include <typeinfo> using namespac ...

  2. TextView的属性列表

    网上收集和自己整理的TextView控件中可选择的属性列表,经常可以用到的: android:autoLink       设置是否当 文本为URL链接/email/电话号码/map时,文本显示为可点 ...

  3. 一步步优化JVM五:优化延迟或者响应时间(1)

    http://blog.csdn.net/zhoutao198712/article/details/7791969      本节的目标是做一些优化以满足对应用对延迟的需求.这次需要几个步骤,包括完 ...

  4. BigDecimal的equals

    BigDecimal testA = new BigDecimal(79); BigDecimal testB = new BigDecimal("79.00"); System. ...

  5. Yii 2.0 单文件上传

    先创建一个(UploadForm.php)模型层 <?phpnamespace app\models; use yii\base\Model;use yii\web\UploadedFile; ...

  6. Informix 中执行多条SQL(Execute Script)

    有的时候我们需要在ADO.NET中同时执行多条的SQL语法,我们要如何处理, 例如下: //查詢基本資料 private static void TestQry() { DataTable dtRet ...

  7. [ActionScript 3.0] AS3 获取函数参数个数

    function createFunction(param1:String,param2:String,param3:int=0):void { trace(arguments.length);//a ...

  8. 一些BOOTSTRAP的问题

    老师好,有几个点不是很明白,劳烦老师帮忙解惑 <1>不是特别清楚nav和navbar的区别,视频中用的是nav标签,而class则标明navbar,是不是这里的nav其实没有什么作用,而c ...

  9. Entity Framework6 访问MySQL

    先用PM命令安装EF6,MySQL提供的EF实现新增.删除.修改是采用存储过程实现的 Install-Package EntityFramework 配置修改如下 <?xml version=& ...

  10. C#委托多播、Lambda表达、多线程、任务

    class Program { static void Main(string[] args) { Action<double> ops = MathOperations.Mutiply; ...