Eckiges Eltern Kind mit Service

Question

Ich stolpere mit einigen Konzepten von Angular, insbesondere den Fluss von Variablen und Umfang.

Ich versuche, eine Variable in einem untergeordneten Controller festzulegen und es an einen übergeordneten Bereich zu übergeben. Betrachten Sie dieses einfache Beispiel:

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); 
    } 
}); 

Dann meine Aufschlags ist wie folgt:

{{hex}} 

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

Die Berechnung durch das Kind Controller gehandhabt wird, aber wie Sie kann ich sehen, möchte die Variable an die 'Eltern' übergeben. Ich habe über den "Elternbereich" gelesen, aber ich verstehe, dass dies keine Best Practice ist, also versuche ich, einen Dienst zu verwenden. Wo gehe ich falsch?

Answer 1

Es gibt einen Blick haben viele verschiedene Wege, um dies zu erreichen, und ich würde tatsächlich folgenden Ansatz empfehlen (mit gemeinsamen $scope object variable in beiden Eltern-Kind-Controller) anstelle von Service, da es viel einfacher und sauberer Ansatz ist.

Sie können dann auf den Wert hex im übergeordneten Controller unter Verwendung von $scope.shareValue.hex zugreifen.

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; 
} 

=========================================== ======================== Aktualisiert mit mit service:
Bitte beachten Sie Matthew Cawley Post auf Kommentar unten.

Answer 2

Sie sollten den Wert zunächst mithilfe einer Dienstfunktion in Ihrem untergeordneten Controller festlegen und dann in Ihrem übergeordneten Controller eine getvalue-Funktion in Ihrem übergeordneten Controller verwenden.

Ihre setvalue- und getvalue-Funktion sollte in Betrieb sein.

Controller-Code

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() 
} 

Servicecode

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-Code

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

    </div> 

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

    </div> 

bei Arbeits plunker