您的位置：首页 > Web前端 > AngularJS

angular

2016-05-06 10:26 543 查看

$emit,$broadcast,$on的用法

<div ng-controller="ParentCtrl as parent" class="ng-scope">
{{ parent.data }}
<div ng-controller="SiblingOneCtrl as sib1" class="ng-scope">
{{ sib1.data }}
</div>
</div>
app.controller('ParentCtrl',
function ParentCtrl ($scope) {

$scope.$broadcast('parent', 'Some data'); // going down!

});

app.controller('SiblingOneCtrl',
function SiblingOneCtrl ($scope) {

$scope.$on('parent', function (event, data) {
console.log(data); // 'Some data'
});

});
app.controller('ParentCtrl',
function ParentCtrl ($scope) {

$scope.$on('child', function (event, data) {
console.log(data); // 'Some data'
});

});

app.controller('SiblingOneCtrl',
function SiblingOneCtrl ($scope) {

$scope.$emit('child', 'Some data'); // going up!

});
<div ng-controller="ParentCtrl as parent" class="ng-scope">
<div ng-controller="SiblingOneCtrl as sib1" class="ng-scope"></div>
<div ng-controller="SiblingTwoCtrl as sib2" class="ng-scope"></div>
</div>
$scope.$parent.$broadcast('myevent', 'Some data');
directive中与controller @ & = 传参的区别
<!doctype html>
<html ng-app="MyModule">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css">
</head>
<body>
<div ng-controller="MyCtrl">
<greeting greet="sayHello(name)"></greeting>
<greeting greet="sayHello(name)"></greeting>
<greeting greet="sayHello(name)"></greeting>
</div>
</body>
<script src="framework/angular-1.3.0.14/angular.js"></script>
<script src="ScopeAnd.js"></script>
</html>
var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
$scope.sayHello=function(name){
alert("Hello "+name);
}
}])
myModule.directive("greeting", function() {
return {
restrict:'AE',
scope:{
greet:'&'
},
template:'<input type="text" ng-model="userName" /><br/>'+
'<button class="btn btn-default" ng-click="greet({name:userName})">Greeting</button><br/>'
}
});
<!doctype html>
<html ng-app="MyModule">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css">
</head>
<body>
<div ng-controller="MyCtrl">
<drink flavor="{{ctrlFlavor}}"></drink>
</div>
</body>
<script src="framework/angular-1.3.0.14/angular.js"></script>
<script src="ScopeAt.js"></script>
</html>
var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
$scope.ctrlFlavor="百威";
}])
myModule.directive("drink", function() {
return {
restrict:'AE',
scope:{
flavor:'@'
},
template:"<div>{{flavor}}</div>"
// ,
// link:function(scope,element,attrs){
// 	scope.flavor=attrs.flavor;
// }
}
});
<!doctype html>
<html ng-app="MyModule">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css">
</head>
<body>
<div ng-controller="MyCtrl">
Ctrl:
<br>
<input type="text" ng-model="ctrlFlavor">
<br>
Directive:
<br>
<drink flavor="ctrlFlavor"></drink>
</div>
</body>
<script src="framework/angular-1.3.0.14/angular.js"></script>
<script src="ScopeEqual.js"></script>
</html>
var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
$scope.ctrlFlavor="百威";
}])
myModule.directive("drink", function() {
return {
restrict:'AE',
scope:{
flavor:'='
},
template:'<input type="text" ng-model="flavor"/>'
}
});
$applay & $digest
angularjs自带指令如ng-click，当点击时，AngularJS会将此function包装到一个wrapping function中，
然后传入到$scope.$apply(),你的function会执行，如果修改models会有一轮$digest循环，用来确保view也会更新。
$digest循环中，watchers会被触发，当一个watcher被触发时，AngularJS会检测scope模型，如果它发生了变化那么关联到该
watcher的回调函数就会被调用。
$scope.$watch('aModel', function(newValue, oldValue) {
[code]  //update the DOM with newValue
});  这里更新view
[code]angular.module('myApp',[]).controller('MessageController', function($scope) {
$scope.getMessage = function() {  
  setTimeout(function() {  
    $scope.$apply(function() {  
//wrapped this within $apply  
$scope.message = 'Fetched after 3 seconds';   
console.log('message:' + $scope.message);  
});
  }, 2000);  
}  
  
$scope.getMessage();  
});
[/code]
/* What happens with $apply */

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航