angular.js框架下controller传值方法

AngularJS中的controller是个函数,用来向视图的作用域($scope)添加额外的功能,我们用它来给作用域对象设置初始状态,并添加自定义行为。

当我们创建一个新的控制器时,angular.js会创建一个新的$scope对象给controller。顶级ng-app所在的层级就是$rootScope。

cotroller之间的通信本质上是当前的controller所在的$scope如何跟其他controller上的$scope进行通信。

第一种方式:

作用域嵌套的方式:angular.js在默认情况下,在当前作用域查找不到值的时候,会去上一层作用域进行查找。这种方法用的很少,但是很简单。


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

$scope.person={name:'wd'};

});

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

$scope.person.age = 24;

$scope.saySomething =function(){

alert($scope.person);    //{name:'wd',age:24}

})

第二种:利用作用域传递事件。

$broadcast: 触发的事件要通知整个事件系统(允许任意作用域处理这个事件)就要向下传播。

$emit: 如果要提醒一个全局模块,需要通知更高层次的作用域时(例如$rootscope)需要把事件向上传递。

$on:作用域上使用$on进行事件监听。

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

var unbind = $scope.$on('change',function(data){

console.log(data);   //Hello

})

$scope.$on('$destory',unbind);   //为了进一步提升性能,定义的事件处理函数要在作用域销毁时一起释放掉

})

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

$scope.$emit('change','Hello');

})

但是这种方式有点繁琐,定义多个事件处理函数时整个人都不好了,所以我们来改进一下

angular.module('MyApp')

.config(['$provide', function($provide){

$provide.decorator('$rootScope', ['$delegate', function($delegate){

   Object.defineProperty($delegate.constructor.prototype, '$onRootScope', {

       value: function(name, listener){

               var unsubscribe = $delegate.$on(name, listener);

               this.$on('$destroy', unsubscribe);

               return unsubscribe;

        },

      enumerable: false

});

return $delegate;

}]);

}]);

那么我们在控制器中定义事件处理函数时:

angular.module('MyApp')

.controller('MyController', ['$scope', function MyController($scope) {

$scope.$onRootScope('someComponent.someCrazyEvent', function(){

console.log('foo');

});

}

]);

第三种方法:

定义服务:服务(service)提供了一种能在应用的整个生命周期内保持数据的方式,能够在控制器之间进行通信,且能保证数据的一致性。

angular.module('Myapp')

.factory('Data',function(){

return {data:'wd'}

});

.controller('parentController',function($scope,Data){

$scope.data =Data;

});

你可能感兴趣的:(angular.js框架下controller传值方法)