angular中控制器之间通报参数的体式格局

在angular中,每一个controller(掌握器)都邑有本身的$scope,经由过程为这个对象增加属性赋值,就能够将数据通报给模板举行衬着,每一个$scope只会在本身掌握器内起作用,而有时刻须要用到其他掌握器中的数据,这个时刻就要考虑到掌握器之间参数的通报了。

1.经由过程$rootscope传参

起首,在angular中存在作用域的继续,继续作用域相符 JavaScript 的原型继续机制,这意味着假如我们在子作用域中接见一个父作用域中定义的属性,JavaScript 起首在子作用域中寻觅该属性,没找到再从原型链上的父作用域中寻觅,假如还没找到会再往上一级原型链的父作用域寻觅。在 AngularJS 中,作用域原型链的顶端是$rootScope,AnguarJS 将会寻觅到$rootScope 为止,假如照样找不到,则会返回 undefined。

      <div ng-app="app">
        <div ng-controller="parent">
            {{name}}
            <div ng-controller="son">
            {{name}}
            </div>
        </div>
    </div>
    var app=angular.module("app",[]);
    app.controller('parent', ['$scope',function ($scope) {
        $scope.name="hello";
    }]);
    app.controller('son', ['$scope',function ($scope) {
        console.log($scope.name);//hello
    }]);

在子掌握器中打印name,但我们发明在这个掌握器中并未为$scope增加name,因而向父作用域查找,发明父作用域存在该属性,所以能够打印出来。

$rootscope 是一切 $scope 的最上层对象,能够理解为一个 Angular 运用中的全局作用域对象。所认为$rootscope增加的属性,在一切的掌握器中都能够接见获得。然则为它附加太多逻辑或许变量并非一个好主意,和js全局污染是一样的.

2.经由过程事宜的体式格局

起首引见一下angular中的事宜播送:

$on(name,handler) 注册一个事宜处置惩罚函数,该函数在特定的事宜被当前作用域收到(从父级或许子级作用域)时将被挪用。

$emit(name,args) 向当前父作用域发送一个事宜,直至根作用域。
$broadcast(name,args) 向当前作用域下的子作用域发送一个事宜。
name示意事宜称号,args示意事宜流传的数据,handler示意在接收到通报时要实行的回调,该回调中有event参数,示意事宜,有以下要领:

            event.targetScope 猎取流传事宜的作用域
            event.currentScope 猎取吸收事宜的作用域
            event.name 流传的事宜的称号
            event.stopPropagation() 阻挠事宜举行冒泡流传,仅在$emit事宜中有用
            event.preventDefault() 阻挠流传事宜的发作  
            event.defaultPrevented 假如挪用了preventDefault事宜则返回true

1)子向父掌握器传值

    <div ng-app="app">
        <div ng-controller="parent">
            {{name}}
            <div ng-controller="son">
            {{name}}
            </div>
        </div>
    </div>
    var app=angular.module("app",[]);
    app.controller('parent', ['$scope',function ($scope) {
        $scope.$on('call', function(event,data){
            $scope.name=data;
            console.log(data);
        });
    }]);
    app.controller('son', ['$scope',function ($scope) {
        $scope.name="hello";
        $scope.$emit('call', $scope.name);
    }]);

2)父向子掌握器传值

    var app=angular.module("app",[]);
    app.controller('parent', ['$scope',function ($scope) {
        $scope.name="hello";
        $scope.$broadcast('call', $scope.name);//传值
    }]);
    app.controller('son', ['$scope',function ($scope) {
        $scope.$on('call', function(event,data1){
            $scope.name1=data1;//接收值
            
        });
    }]);

注重:参数name相同时,父子掌握器之间才能够传值

这类体式格局不可完成兄弟级传值,不过能够运用父级掌握器作为中介,先由子掌握器传值给父掌握器,然后再由父掌握器通报给别的的子掌握器。

补充:之前碰到一个需求是,父掌握器中,触发change事宜后,猎取数据通报给子掌握,然则在子掌握器只须要接收一次,发明可经由过程以下体式格局:

var scan=$scope.$on(name,handler);scan();这模样掌握器就只接收可一次,避免了屡次接收带来的影响!

3.经由过程效劳

在angular中效劳是一个单例,所以在效劳中天生一个对象,该对象就能够应用依靠注入的体式格局在一切的掌握器中同享。
例:

    var app=angular.module("app",[]);
    app.controller('myCtrl', ['$scope','appService',function ($scope,appService) {
        appService.name="hi!!"
    }]);
    app.controller('myCtrl1', ['$scope', 'appService',function ($scope,appService) {
        $scope.name=appService.name;
    }]);
    app.service("appService", [function(){
        this.name="hello";
    }]);

经由过程在appService这个效劳中增加对象,然后在须要用到的掌握器中,经由过程依靠注入的体式格局导入该效劳,在myCtrl掌握器中修正这个对象,在myCtrl1中也会获得修正事后的值。

    原文作者:北城以南
    原文地址: https://segmentfault.com/a/1190000009167725
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞