--@angularJS--指令与控制器之间较复杂的交互demo2
1、index.html:
<!DOCTYPE HTML>
<html ng-app="app">
<head>
<title>custom-directive</title>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/bootstrap.css">
<script src="../js/angular.js"></script>
<!--<script src="../js/jquery-1.10.2.min.js.js"></script>-->
</head>
<body>
<!-- 下面是指令与控制器交互的demo2. -->
<!-- 这个demo的原理是将方法赋给属性,在js中直接调用属性就等于直接调用方法 -->
<div ng-controller="myCtrl">
<loader loadAttr="loadData()">滑动加载</loader>
</div>
<div ng-controller="myCtrl2">
<loader loadAttr="loadData2()">滑动加载</loader>
</div>
<script src="./directive-controller2.js"></script>
</body>
</html>
2、directive-controller2.js:
var myModule = angular.module("app",[]);
myModule.controller('myCtrl', ['$scope', function($scope){
$scope.loadData=function(){
console.log("正在加载......");
}
}]);
myModule.controller('myCtrl2', ['$scope', function($scope){
$scope.loadData2=function(){
console.log("正在加载222222......");
}
}]);
myModule.directive('loader',function(){
return {
restrict:'AE',
link:function(scope,element,attrs){
element.bind('mouseenter',function(event){
scope.$apply(attrs.loadattr);//属性中的方法的调用非要这样写,注意:不管html中的属性是大写还是小写,这里的属性调用都必须是小写,否则无效
})
}
}
});
--@angularJS--指令与控制器之间较复杂的交互demo2的更多相关文章
- AngularJs开发——指令与控制器间的通信
(原文:http://www.html5jscss.com/controller-between-directive.html) 指令与控制器之间通信,跟控制器间的通信.指令间通信也类似,也是下几种方 ...
- angular开发控制器之间的通信
一.指令与控制器之间通信,无非是以下几种方法: 基于scope继承的方式 基于event传播的方式 service的方式(单例模式) 二.基于scope继承的方式: 最简单的让控制器之间进行通信的方法 ...
- AngularJS: 自定义指令与控制器数据交互
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- AngularJS进阶(九)控制器controller之间如何通信
AngularJS控制器controller之间如何通信 注:请点击此处进行充电! angular控制器通信的方式有三种: 1,利用作用域继承的方式.即子控制器继承父控制器中的内容 2,基于事件的方式 ...
- angularjs控制器之间的数据共享与通信
1.可以写一个service服务,从而达到数据和代码的共享; var app=angular.module('app',[]); app.service('ObjectService', [Objec ...
- AngularJS中控制器之间通信方法
在同个angular应用的控制器之间进行通信可以有很多种不同的方式,本文主要讲两种: 基于scope继承的方式和基于event传播的方式 基于scope继承的方式 最简单的让控制器之间进行通信的方法是 ...
- angularJS控制器之间的相互通信方式、$broadcast、$emit、$on
在项目中,我们可能会很经常性的利用到控制器之间的相互通信,在angular中的控制器之间的相互通信有以下几种方式: 1)通过本地数据的存储localstorage,sessionstorage, 2) ...
- AngularJS指令进阶 – ngModelController详解
AngularJS指令进阶 – ngModelController详解 在自定义Angular指令时,其中有一个叫做require的字段,这个字段的作用是用于指令之间的相互交流.举个简单的例子,假如我 ...
- angularJS 指令解释
本文引自 http://blog.csdn.net/kongjiea/article/details/49840035 指令,很重要 AngularJS与jQuery最大的区别在哪里?我认为,表现在数 ...
随机推荐
- HTML中为何P标签内不可包含DIV标签? (转)
起因:在做项目时发现原本在DW中无误的代码到了MyEclipse6.0里面却提示N多错误,甚是诧异.于是究其原因,发现块级元素P内是不能嵌套DIV的. 深究:我们先来认识in-line内联元素和blo ...
- windows下强大的wmic命令行工具
windows最令网管诟病的地方就是命令行没有unix和linux强大.但这种情况正在不断改观,windows命令行也越来越强大了.其中,微软耗费大量精力打造的wmi就是一例. 获得进程ID与进程名 ...
- HDU 3255 Farming
矩形面积并变形,一层一层的算体积 #include<cstdio> #include<cstring> #include<cmath> #include<ma ...
- ASP.NET MVC 5 WEB API 用户验证
参考博客:ASP.NET MVC5+EF6+EasyUI 后台管理系统(65)-MVC WebApi 用户验证 (1) 参考博客:MVC WebApi 用户验证 (2)构建ASP.NET MVC5+E ...
- [poj解题]1017
Packets Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 41014 Accepted: 13776 Descrip ...
- Java模拟post提交表单数据
package test; import java.io.BufferedReader; import java.io.DataOutputStream; import java.io.IOExcep ...
- The 2014 ACMICPC Asia Regional Guangzhou Online
[A]-_-/// [B]线段树+位运算(感觉可出) [C]地图BFS,找最长线 [D]地图BFS,加上各种复杂情况的最短路-_- [E]-_-/// [F]三分+圆与线段的交点,计算几何 [G]-_ ...
- Ubuntu下安装PDF 文档阅读器Adobe Reader 9.5.5
由于没有PPA所以我们必须在Adobe的官方FTP上下载安装,下面的方法同时适用于32位和64位系统: wget ftp://ftp.adobe.com/pub/adobe/reader/unix/9 ...
- H5手机开发锁定表头和首列(惯性滚动)解决方案
前端时间移动端在做表格的时候需要这个功能,由于还有实现类似原生的惯性滚动功能,于是使用了iscroll插件. iscroll插件下载地址:iscroll5 该功能demo github地址: http ...
- 1、下载LInux版的tomcat6
1.下载LInux版的tomcat6 http://mirror.bit.edu.cn/apache/tomcat/tomcat-6/v6.0.37/bin/apache-tomcat-6.0.37. ...