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. POJ1611 The Suspects 并查集模板题

    题目大意:中文题不多说了 题目思路:将每一个可能患病的人纳入同一个集合,然后遍历查找每个点,如果改点点的根节点和0号学生的根节点相同,则该点可能是病人. 模板题并没有思路上的困难,只不过在遍历时需要额 ...

  2. HDOJ1312<DFS>

    题意: 给一张图,有墙,有路.问某人从起点开始,最多能走多少个格子. 思路: bfs;<水题> #include<iostream> #include<cstring&g ...

  3. （转） 通过input分片的大小来设置map的个数

    摘要 通过input分片的大小来设置map的个数 map inputsplit hadoop 前言:在具体执行Hadoop程序的时候,我们要根据不同的情况来设置Map的个数.除了设置固定的每个节点上可 ...

  4. 转 如何使用JEE6快速开发简单的webservice

    转自:http://www.iteye.com/topic/1135747,作者:红尘默岩 前言:朋友们开始以下教程前,请先看第五大点的注意事项,以避免不必要的重复操作. 一.准备工作(以下为本实例使 ...

  5. extjs 框架模板

    的 <script> Ext.onReady(function(){ Ext.create('Ext.container.Viewport', { layout: 'border', it ...

  6. C++ Builder多线程编程技术经验谈（转）

    源:C++ Builder多线程编程技术经验谈 线程之可行性   在很多情况下,可能需要为程序创建线程.这里给出其中一些可能性: (1)如果创建的是一个多文档接口(Multiple Document ...

  7. PHP 页面缓冲函数

    1.flush:刷新缓冲区的内容,输出.函数格式:flush()说明:这个函数经常使用,效率很高.2.ob_start :打开输出缓冲区函数格式:void ob_start(void)说明:当缓冲区激 ...

  8. sublime text3 Emmet (原zenCoding)安装方法

    1.安装使用Package Control组件安装 (1)打开控制台 (mac)control+`; (win)ctrl+` (2)复制一下代码并回车 import urllib.request,os ...

  9. UILabel的抗压缩、抗拉伸、以及控件的约束简述

    今天来说一说UILabel的约束设置问题 首先主要介绍:Priority(控件约束的优先级).Content Hugging Priority(控件抗拉伸优先级).Content Compressio ...

  10. 配置 Gitblit 进行 Git 代码管理

    配置 Gitblit 进行 Git 代码管理 环境 CentOS 7 x64 IP: 10.6.0.2 首先需要安装jdk  安装步骤 就略过了 下载最新版本  gitblit wget http:/ ...