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>
</head>
<body>
<!-- 下面是指令与控制器交互的demo. -->
<div ng-controller="myCtrl">
    <loader>滑动加载</loader>
</div>
<script src="./directive-controller.js"></script>
</body>
</html>

2、directive-controller.js:

var myModule = angular.module("app",[]);

myModule.controller('myCtrl', ['$scope', function($scope){
    $scope.loadData=function(){
        console.log("正在加载......");
    }
}]);

myModule.directive('loader',function(){
    return {
        restrict:'AE',
        // replace:true,
        // transclude:true,//这也是个坑,声明了上面的替换和这个嵌套属性而不声明模板替换和嵌套的话,光在html中写自定义的指令标签会什么也出不来
        // scope:{},//这是个坑,当控制器与指令交互的时候不能声明独立作用域,否则作用域变成私有,指令中将看不到控制器中定义的方法,程序会报错:说该私有作用域中找不到loadData方法
        link:function(scope,element,attrs){
            element.bind('mouseenter',function(event){
                // scope.$apply("loadData()");
                scope.loadData();
            })
        }
    }
});

--@angularJS--指令与控制器之间的交互demo的更多相关文章

  1. Salesforce视图与控制器之间的交互

    刚接触Salesforce,过程的确是比较艰难了,中文资料几乎没有,看英文资料学的效率却不高,不过看了一段时间的英文资料发现自己英语水平挺高不少啊,现在看都不用工具翻译,早知道就再次尝试报个6级,看下 ...

  2. --@angularJS--指令与指令之间的交互demo

    1.index.html: <!DOCTYPE HTML><html ng-app="app"><head>    <title>c ...

  3. AngularJs-指令和指令之间的交互(动感超人)

    前言: 上节我们学习到了指令和控制器之间的交互,通过给指令添加动作,调用了控制器中的方法.本节我们学习指令和指令之间是如何交互的,我们通过一个小游戏来和大家一起学习,听大漠老师说这是国外的人写的dem ...

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

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

  5. angularjs探秘<三> 控制器controller及angular项目结构

    先来看一个例子 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&quo ...

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

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

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

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

  8. --@angularJS--指令与控制器之间较复杂的交互demo2

    1.index.html: <!DOCTYPE HTML><html ng-app="app"><head>    <title>c ...

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

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

随机推荐

  1. 关闭和释放JDBC

    今天在项目中看到一段代码, Connection conn = null;  ResultSet rs = null;  PreparedStatement pss = null;  try  {  ...

  2. UITableView 性能优化

    网络图片异步加载,SDWebImage. 文字直接 drawInRect/drawAtPoint 绘制,参考 ABTableViewCell,AdvancedTableViewCells. 本地图片也 ...

  3. sina微博上看到的关于android界面设计相关的规范

    图片来自:http://photo.weibo.com/5174249907/wbphotos/large/mid/3777508610941685/pid/005EaCLFjw1emcpzdgrj9 ...

  4. 关于有限状态机FSM同步复位的问题

    FSM通常情况下使用异步信号进行复位,如FSM1中的rst_n信号.当rst_n信号为低时,FSM进入空闲状态IDLE. 在某些特殊情况下有可能需要跟随某个外部信号强制切换到空闲状态,也即同步复位.下 ...

  5. Python 100例(上)

    如果你已经把基础看完,可以尝试一下看看以下例子了,如果不会做也不要紧,你要尝试手动把所有的代码都敲一边.别嫌麻烦,因为都是从麻烦到简单的. 实例1: 题目:有1.2.3.4个数字,能组成多少个相互不同 ...

  6. JAVA基础--方法的重写overwrite 和 重载overload

    重写 overwrite或者override: 相同的方法名称, 参数列表和返回类型 重载overload: 方法有相同的名字, 但是参数不同 (参数个数不同, 参数类型不同, 其中一个不同即可), ...

  7. (简单) CF 44D Hyperdrive,数学。

    In a far away galaxy there are n inhabited planets, numbered with numbers from 1 to n. They are loca ...

  8. Spring的5种事物配置方式

    Spring事务配置的五种方式 前段时间对Spring的事务配置做了比较深入的研究,在此之间对Spring的事务配置虽说也配置过,但是一直没有一个清楚的认识.通过这次的学习发觉Spring的事务配置只 ...

  9. Lua学习系列(五)

    calling C functions from Lua 5.2 这篇文章也不错: http://blog.csdn.net/x356982611/article/details/26688287 h ...

  10. (六)Jquery Mobile主题及插件的使用

    二.自定义主题      根据js自带的主题,提取出来进行更改 来自为知笔记(Wiz)