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的更多相关文章

  1. AngularJs开发——指令与控制器间的通信

    (原文:http://www.html5jscss.com/controller-between-directive.html) 指令与控制器之间通信,跟控制器间的通信.指令间通信也类似,也是下几种方 ...

  2. angular开发控制器之间的通信

    一.指令与控制器之间通信,无非是以下几种方法: 基于scope继承的方式 基于event传播的方式 service的方式(单例模式) 二.基于scope继承的方式: 最简单的让控制器之间进行通信的方法 ...

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

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

  4. AngularJS进阶(九)控制器controller之间如何通信

    AngularJS控制器controller之间如何通信 注:请点击此处进行充电! angular控制器通信的方式有三种: 1,利用作用域继承的方式.即子控制器继承父控制器中的内容 2,基于事件的方式 ...

  5. angularjs控制器之间的数据共享与通信

    1.可以写一个service服务,从而达到数据和代码的共享; var app=angular.module('app',[]); app.service('ObjectService', [Objec ...

  6. AngularJS中控制器之间通信方法

    在同个angular应用的控制器之间进行通信可以有很多种不同的方式,本文主要讲两种: 基于scope继承的方式和基于event传播的方式 基于scope继承的方式 最简单的让控制器之间进行通信的方法是 ...

  7. angularJS控制器之间的相互通信方式、$broadcast、$emit、$on

    在项目中,我们可能会很经常性的利用到控制器之间的相互通信,在angular中的控制器之间的相互通信有以下几种方式: 1)通过本地数据的存储localstorage,sessionstorage, 2) ...

  8. AngularJS指令进阶 – ngModelController详解

    AngularJS指令进阶 – ngModelController详解 在自定义Angular指令时,其中有一个叫做require的字段,这个字段的作用是用于指令之间的相互交流.举个简单的例子,假如我 ...

  9. angularJS 指令解释

    本文引自 http://blog.csdn.net/kongjiea/article/details/49840035 指令,很重要 AngularJS与jQuery最大的区别在哪里?我认为,表现在数 ...

随机推荐

  1. 【转】Grub Rescue修复方法

    症状: 开机显示: GRUB loading error:unknow filesystem grub rescue> 原因:已经发现下面几种操作会导致这种问题:1,想删除debian,于是直接 ...

  2. TCP重传问题解决思路

    处理线上问题经常会碰到网络抖动的情况, 网络抖动有可能就是TCP重传导致,下面简单说下TCP重传的排查思路,不一定能完全解决问题 1. 找运维同事确定是否是网线问题, 如果是网线问题请更换网线 2. ...

  3. hibernate--对象的三种状态Transient,Persistent,Detached

    Transient:刚new出来的对象 Persistent: sava或者update之后的状态 Detached: close或者clear之后 test函数: @Test public void ...

  4. openstack controller ha测试环境搭建记录（七）——配置glance

    在所有集群安装glance软件:yum install -y openstack-glance python-glanceclient 在任一节点创建glance用户:mysql -u root -p ...

  5. 配置 nginx location 实时查看 php-fpm 的状态

    在Nginx.conf 里配置 location ~ ^/status$ { include fastcgi_params; fastcgi_pass 127.0.0.1:9000; fastcgi_ ...

  6. HAProxy 7层 负载均衡

    系统 CentOS 5.8 x64 wget http://haproxy.1wt.eu/download/1.3/src/haproxy-1.3.26.tar.gz cd haproxy-1.3.2 ...

  7. matlab中gatbx工具箱的添加

    1. 从http://crystalgate.shef.ac.uk/code/下载工具箱压缩包gatbx.zip 2. 解压gatbx.zip,将其子文件夹genetic放在matlab安装目录too ...

  8. CSDN泄漏数据完整分析

    CSDN泄漏数据完整分析 2011-12-22 08:59:26 53391 次阅读 0 条评论 感谢mayee的投递 昨天CSDN的用户数据库被人在网上公布.我下载分析了下里面的数据,得出了一些很有 ...

  9. fedora 挂载 小米手机 （估计其它android设备也是类似操作）

    1 参考ubuntu挂载 在Ubuntu挂载使用MTP设备步骤如下: 1.将MTP设备连接至PC机 2.如果是第一次使用MTP设备需要安装以下软件,否则可以跳过此步骤: $ sudo apt-get ...

  10. redhat7 常用命令

    关闭防火墙 systemctl stop firewalld 查看防火墙状态 systemctl status firewalld 永久关闭防火墙命令.重启后,防火墙不会自动启动.systemctl ...