--@angularJS--指令与控制器之间的交互demo
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的更多相关文章
- Salesforce视图与控制器之间的交互
刚接触Salesforce,过程的确是比较艰难了,中文资料几乎没有,看英文资料学的效率却不高,不过看了一段时间的英文资料发现自己英语水平挺高不少啊,现在看都不用工具翻译,早知道就再次尝试报个6级,看下 ...
- --@angularJS--指令与指令之间的交互demo
1.index.html: <!DOCTYPE HTML><html ng-app="app"><head> <title>c ...
- AngularJs-指令和指令之间的交互（动感超人）
前言: 上节我们学习到了指令和控制器之间的交互,通过给指令添加动作,调用了控制器中的方法.本节我们学习指令和指令之间是如何交互的,我们通过一个小游戏来和大家一起学习,听大漠老师说这是国外的人写的dem ...
- AngularJs开发——指令与控制器间的通信
(原文:http://www.html5jscss.com/controller-between-directive.html) 指令与控制器之间通信,跟控制器间的通信.指令间通信也类似,也是下几种方 ...
- angularjs探秘<三> 控制器controller及angular项目结构
先来看一个例子 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&quo ...
- angular开发控制器之间的通信
一.指令与控制器之间通信,无非是以下几种方法: 基于scope继承的方式 基于event传播的方式 service的方式(单例模式) 二.基于scope继承的方式: 最简单的让控制器之间进行通信的方法 ...
- AngularJS: 自定义指令与控制器数据交互
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- --@angularJS--指令与控制器之间较复杂的交互demo2
1.index.html: <!DOCTYPE HTML><html ng-app="app"><head> <title>c ...
- AngularJS进阶(九)控制器controller之间如何通信
AngularJS控制器controller之间如何通信 注:请点击此处进行充电! angular控制器通信的方式有三种: 1,利用作用域继承的方式.即子控制器继承父控制器中的内容 2,基于事件的方式 ...
随机推荐
- docker 1.12 版本 docker swarm 集群
博客已经迁移到 个人博客中 个人博客 更新地址: http://www.xf80.com/2016/10/25/docker-swarm-1.12/ docker 1.12 版本 的新特性 (1)do ...
- Asp获取网址相关参数大全
Asp获取网址相关参数大全 代码一:[获取地址中的文件名,不包含扩展名]<%dim Url,FileName,File Url=split(request.servervariables(& ...
- 解决cookie 跨iframe
document.cookie = "name=caoyc;path=/"document.cookie = "age=13;path=/"//时间可以不要,但 ...
- PAT (Advanced Level) 1019. General Palindromic Number (20)
简单题. #include<iostream> #include<cstring> #include<cmath> #include<algorithm> ...
- JAVA语法题
import java.util.*; public class Birthdays { public static void main(String[] args){ Map<Friends, ...
- DIV+CSS 常见问题及解决办法整理
http://blog.shaogroup.com/divcss-%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98%E5%8F%8A%E8%A7%A3%E5%86%B3%E5% ...
- openstack controller ha测试环境搭建记录（三）——配置haproxy
haproxy.cfg请备份再编辑:# vi /etc/haproxy/haproxy.cfg global chroot /var/lib/haproxy daemon group ...
- WPF教程：附加属性
一.附加属性的特点1.特殊的依赖属性2.用于非定义该属性的类 例如Grid面板的RowDefinition.ColumnDefinition.Canvas面板的Left.RightDockPanel面 ...
- [Unity Shader]ShaderForge制作Shader
什么是ShaderForge ShaderForge的目标是推动统一的视觉质量提升到了新的高度, 给你自由的材质创建在一个视觉和直观的方式——不需要代码! ShaderForge的特性 •实时着色器预 ...
- js-权威指南学习笔记9
第九章 类和模块 1.在JS中,类的实现是基于其原型继承机制的,如果两个实例都从同一个原型对象上继承了属性,我们说它们是同一个实例. 2.常见的编程约定:定义构造函数既是定义类,并且类名首字母要大写. ...