本片主要介绍$emit, $broadcast，$on经常开发的用法！
这张图差不多表明了$emit, $broadcast在aj里面的机制和用场！
这篇文章介绍了aj里面使用jsonp的原理和注意的地方！
下面直接显示下我运行起来的界面！
然后贴上DOM和js代码，本篇不多说，分享一些常用的东西！
DOM+js 代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Broadcasting</title>
<script src="./bower_components/angular/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module(‘app‘,[]);
app.controller(‘firstCtrl‘,function($scope){
$scope.$on(‘eventName‘,function(event,args){
$scope.message = args.message;
console.log($scope.message);
});
});
app.controller(‘secondCtrl‘,function($scope){
$scope.handleClick = function(msg){
$scope.$emit(‘eventName‘,{message:msg});
};
});
app.controller(‘threeCtrl‘,function($scope){
$scope.handleClick1 = function(msg){
$scope.$broadcast(‘eventName‘,{message1:msg});
};
});
app.controller(‘fourCtrl‘,function($scope){
$scope.$on(‘eventName‘,function(event,args){
$scope.message1=args.message1;
console.log($scope.message1);
});
});
app.controller(‘myjsonpCtrl‘,[‘$scope‘,‘$http‘,function($scope,$http){
$scope.clickjsonp=function(){
$http.jsonp(‘http://angularjs.org/greet.php?callback=JSON_CALLBACK‘,{params:{name:‘world‘},cache:true})
.success(function(data){
$scope.jsonps = data.greeting;
});
}
}]);
app.constant(‘myConfig‘,{
config1:‘2015‘,
config2:‘ActionByName‘,
});
app.controller(‘constCtrl‘,function($scope,myConfig){
$scope.const1=myConfig.config1;
$scope.const2=myConfig.config2;
});
</script>
</head>
<body ng-app="app">
<div ng-controller="firstCtrl" style="border:2px solid #E75D5C; padding:5px;">
<h1>Parent Controller</h1>
<p>Emit Message : {{message}}</p>
<br />
<div ng-controller="secondCtrl" style="border:2px solid #428bca;padding:5px;">
<h1>Child Controller</h1>
<input ng-model="msg">
<button ng-click="handleClick(msg);">Emit</button>
</div>
</div>
<div ng-controller="threeCtrl" style="border:2px solid #E75D5C; padding:5px;">
<h1>Parent Controller</h1>
<input ng-model="msg">
<button ng-click="handleClick1(msg);">Broadcast</button>
<br /><br />
<div ng-controller="fourCtrl" style="border:2px solid #428bca;padding:5px;">
<h1>Child Controller</h1>
<p>Broadcast Message : {{message1}}</p>
</div>
</div>
<div ng-controller="myjsonpCtrl" style="border:2px solid #E78F5D; padding:5px;">
<input ng-model="jsonps">
<button ng-click="clickjsonp()">试试JSONP取值</button>
</div>
<div style="border:2px solid #E10F5B; padding:5px;" ng-controller="constCtrl">
<input ng-model="const1"><br>
<input ng-model="const2">
</div>
</body>
</html>
时间： 2024-10-17 07:55:59