angular指令通信
[图片上传失败...(image-6747d9-1535602100766)]
<body ng-app="app" ng-controller="skController">
<xmg-dir></xmg-dir>
<button ng-click="click()">点击</button>
</body>
<script src="angular.js"></script>
<script>
//1.创建模块
var app = angular.module('app', []);
//2.创建控制器
app.controller('skController', ['$scope',function ($scope) {
$scope.click = function () {
//alert('click')
//点击父级按钮
$scope.click = function () {
//1.1 父级通知子级 通知方向: 父级->子级
//格式:$broadcast('父级通知名称', 参数)
$scope.$broadcast('buy', {money:"100"});
}
//2.2 父级接收子级通知
$scope.$on('subNotice', function ($event, args) {
alert('父级接收子级通知, 参数为:' + args.id);
})
};
}]);
app.directive('xmgDir', function () {
return{
restrict:'EA',
template:'<div><h1>{{name}}</h1><button ng-click="subClick()">子级按钮</button></div>',
replace:true,
controller:function ($scope) {
$scope.name = "我是控制器中数据";
$scope.show = function (money) {
//alert('show');
alert("拿" + money + "钱买东西");
};
//1.2 子级监听广播, 接收父级发送的数据
/**
格式:$on('父级通知名称',function(事件对象,父级传入的参数){
执行的回调函数
})
*/
$scope.$on('buy', function ($event, args) {
alert('子级收到了广播');
//收到广播,调用show()
$scope.show(args.money);
});
//2.1 子级通知父级, 点击子级按钮 通知方向:子级->父级
$scope.subClick = function () {
$scope.$emit('subNotice', {id:1});
}
}
}
})
</script>
