angular

$emit,$broadcast,$on的用法

 ng-controller="ParentCtrl as parent" class="ng-scope">
  {{ parent.data }}
   ng-controller="SiblingOneCtrl as sib1" class="ng-scope">
      {{ sib1.data }}
  
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!

});
 ng-controller="ParentCtrl as parent" class="ng-scope">
   ng-controller="SiblingOneCtrl as sib1" class="ng-scope">
ng-controller="SiblingTwoCtrl as sib2" class="ng-scope">
$scope.$parent.$broadcast('myevent', 'Some data');

directive中与controller @ & = 传参的区别



	
		
		
	
	
		
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:'
'+         '
'     } });


	
		
		
	
	
		
var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
	$scope.ctrlFlavor="百威";
}])
myModule.directive("drink", function() {
    return {
    	restrict:'AE',
        scope:{
        	flavor:'@'
        },
        template:"
{{flavor}}
"         // ,         // link:function(scope,element,attrs){         // scope.flavor=attrs.flavor;         // }     } });


	
		
		
	
	
		
Ctrl:

Directive:
var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
	$scope.ctrlFlavor="百威";
}])
myModule.directive("drink", function() {
    return {
    	restrict:'AE',
        scope:{
        	flavor:'='
        },
        template:''
    }
});

$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) {  
  //update the DOM with newValue  
});  这里更新view
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();  
      
    });  
/* What happens with $apply */   

你可能感兴趣的:(前端)