サービス付きの角度の親子スコープ

Question

私はAngularの概念、特に変数とスコープの流れに悩まされています。

私がしようとしているのは、子コントローラで変数を設定し、それを親スコープに渡すことです。

module.controller('childController', childController); 
function childController($scope,$http,$window, hexafy) { 
    $scope.hex = hexafy.myFunc(17);  
} 

module.controller('parentController', parentController); 
function parentController($scope, hexafy) { 

} 

module.service('hexafy', function() { 
    this.myFunc = function (x) { 
     return x.toString(16); 
    } 
}); 

はその後、私のマークアップは次のとおりです。：この単純な例を考えてみましょう

{{hex}} 

<section data-ng-controller="listingsViewController">....</section> 

計算は、子コントローラによって処理されていますが、私を見ることができるように変数を '親'に渡したいとします。私は '親'の範囲について読んだことがありますが、これはベストプラクティスではないので、私はサービスを利用しようとしています。どこが間違っていますか？

Answer 1

異なる多くのがありますが、作業を見てこれを実現する方法は、実際には、サービスを使用するのではなく、親と子のコントローラーの両方で共通の$scope object variableを使用することをお勧めします。

親コントローラのhexの値には、$scope.shareValue.hexを使用してアクセスできます。

module.controller('childController', childController); 
function childController($scope,$http,$window, hexafy) { 
    $scope.shareValue.hex = hexafy.myFunc(17); 
} 

module.controller('parentController', parentController); 
function parentController($scope, hexafy) { 
    var shareValue = { 
     hex: '' 
    }; 
    $scope.shareValue = shareValue; 
} 

=========================================== ============================= サービスを使用して更新：
以下のコメントのMatthew Cawley投稿を参照してください。

Answer 2

まず、子コントローラのサービス関数を使用して値を設定してから、親コントローラで親コントローラにgetvalue関数を使用する必要があります。

あなたのsetvalue関数とgetvalue関数が動作している必要があります。

コントローラー・コード

app.controller('childController', childController); 
function childController($scope,$http,$window, hexafy) { 
    $scope.childValue = "Value in child controller" 
    hexafy.setValue($scope.childValue);  
} 

app.controller('parentController', parentController); 
function parentController($scope, hexafy) { 
    $scope.parentValue = hexafy.getValue() 
} 

サービスコード

app.service('hexafy', function() { 

    var value = ""; 
    this.setValue = function(val) { 
    value = val 
    }, 

    this.getValue = function() { 
    return value; 
    } 


    this.myFunc = function (x) { 
     return x.toString(16); 
    } 
}); 

HTMLコード

<div ng-controller="childController"> 
     <h2>Child controller</h2> 
     {{childValue}} 

    </div> 

    <div ng-controller="parentController"> 
     <h2>Parent controller</h2> 
     {{parentValue}} 

    </div> 

はplunker