アングラーでコントローラ間でパラメータを渡す方式

4054 ワード

アングラーでは、各コントローラに独自の$scopeがあります.このオブジェクトに属性の割り当てを加えることで、データをテンプレートに渡してレンダリングすることができます.各$scopeは自分のコントローラ内でのみ機能します.他のコントローラのデータを使う必要があります.このときはコントローラ間のパラメータの伝達を考慮します.
1.$rootscopeを通じて参
まず、anglarにおいて役割領域の継承があり、役割領域はJavaScriptのプロトタイプ継承機構に適合していることを意味しています.これは、もし私たちが副作用領域において父作用領域で定義された属性を訪問したら、JavaScriptはまず副作用領域においてこの属性を探します.プロトタイプチェーン上の父作用領域から探すことができません.まだ見つけられないなら、もう一級のプロトタイプチェーンの父の役割領域を探します.AnglarJSでは、作用ドメインのプロトタイプチェーンの先端は$rootScopeで、AngurJSは$rootScopeまで探していますが、見つけられない場合はundefinedに戻ります.
      
{ {name}}
{ {name}}
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を印刷しましたが、このコントローラにはnameが追加されていないことが分かりました.そこで、親の役割領域を探してみました.親の役割領域にはこの属性が存在していますので、プリントできます.
$rootscopeは、すべての$scopeの最上位のオブジェクトであり、Anglarアプリケーションにおけるグローバルスコープオブジェクトとして理解できる.したがって、rootscopeに追加されたプロパティは、すべてのコントローラにアクセスできます.しかし、それのために多すぎるロジックや変数を付加するのはいい考えではありません.jsグローバル汚染と同じです.
2.事件を通した方法
まず、angglarのイベント放送を紹介します.
n(name,handler)は、特定のイベントが現在のスコープによって受信されたときに呼び出すイベントハンドラ関数を登録します.
$emit(name,args)は、現在の親の役割領域にイベントを送信します.broadcast(name,args)は、現在のスコープにおけるサブスコープにイベントを送信する.nameはイベント名を表し、argsはイベントの伝播データを表し、handlerは転送を受ける時に実行するコールバックを表しています.このコールにはイベントパラメータがあり、イベントを表しています.
            event.targetScope           
            event.currentScope           
            event.name         
            event.stopPropagation()           ,  $emit     
            event.preventDefault()            
            event.defaultPrevented      preventDefault     true
1)子が親コントローラに値を伝えます.
    
{ {name}}
{ {name}}
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.サービスを通じて
anglarではサービスは一例であるので、サービスにおいてオブジェクトを生成し、このオブジェクトは、注入に依存してすべてのコントローラで共有することができる.例:
    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";
    }]);
アプリServiceというサービスにオブジェクトを追加し、必要なコントローラには注入に依存してサービスを導入し、myCtrlコントローラでこのオブジェクトを修正することで、myCtrl 1にも修正された値が得られます.