<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/foundation.min.css"/>
<title>Directive与Controller之间的会话</title>
</head>
<body style="padding: 20px;" ng-app="app">
<div ng-controller="AppCtrl">
<div enterattr="delData()">I'm here!</div>
<hello></hello>
<food apple >所有水果</food>
<food orange>苹果</food>
</div>
<script src="js/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('app', []);
app.controller('AppCtrl', function ($scope) {
$scope.loadMoreData = function () {
alert("正在加载数据...");
}
$scope.delData = function () {
alert("正在删除数据...");
}
});
app.directive('enterattr', function () {
return function (scope, element, attrs) {
element.bind('mouseenter', function () { //绑定鼠标经过事件
element.addClass('alert-box'); //添加属性
scope.$apply(attrs.enterattr);//获取并执行属性值——delData()函数
})
}
});
app.directive('hello', function () {
return {
restrict: 'E',
template: '<div><input ng-model="txt" ></div><div>{{txt}}</div>',
link: function (scope, element) {
scope.$watch('txt', function (newVal) { //监听txt的值
if (newVal === 'error') {
element.addClass('alert-box');
}
})
}
}
});
app.directive('food', function () {
return {
restrict: 'E',
scope: {}, //清空scope
controller: function ($scope) {
$scope.foods = [];
this.addApple = function () {
$scope.foods.push('apple');
}
this.addOrange = function () {
$scope.foods.push('orange');
}
},
link: function (scope, element, attrs) {
element.bind('mouseenter', function () {
console.log(scope.foods);
});
}
}
});
app.directive('apple', function () {
return {
require: 'food', //引入上面的自定义food组件
link: function (scope, element, attrs, foodCtrl) { //foodCtrl是上面的food的controller控制器
element.bind('mouseenter', function () {
foodCtrl.addApple();
});
}
}
});
app.directive('orange', function () {
return {
require: 'food', //引入上面的自定义food组件
link: function (scope, element, attrs, foodCtrl) { //foodCtrl是上面的food的controller控制器
element.bind('mouseenter', function () {
foodCtrl.addOrange();
});
}
}
});
</script>
</body>
</html>
AngularJs入门学习实例
1星 需积分: 7 101 浏览量
2016-05-30
23:19:15
上传
评论
收藏 89KB ZIP 举报
mqy1023
- 粉丝: 180
- 资源: 6
最新资源
- 已过基于Hadoop+Spark招聘推荐可视化系统 大数据项目 毕业设计(源码下载)
- python爬虫开发题答案及题目-100(1).zip
- Python 小游戏 (贪吃蛇、五子棋、扫雷、俄罗斯方块)-3 (2).zip
- c语言实现的数独小游戏.zip
- 高德地图中国行政区划省、市、县经纬度
- March 2024 Expiration Of The OAM Out Of The Box Certificates
- 二叉搜索树迭代器(java代码).docx
- 解决keil MDK 5.38版本 在Debug配置使用STlink调试时软件闪退的问题
- py小项目:用户登录和注册系统开发欢迎图片
- TCCEE-x64-v6.2.3(9.51)
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈