Aktualisiere übergeordneten Controller-Wert aus untergeordneter Winkelfunktion

Question

Ich versuche, einen Bereichswert in einem übergeordneten Controller von einer untergeordneten Anweisung zu ändern.

ich hinzugefügt haben = für Zwei-Wege-Bindung, so dass, wenn ich auf einer der Richtlinie klicken Sie HIER <tr>, wird es Feuer openDetail, die scope.page aktualisieren, die gebunden Zwei-Wege war.

Dennoch wird der page Wert des Controllers nicht aktualisiert.

-Controller HTML:

TEST : {{page}} //Not changed 

<questions-list></questions-list> 

Controller:

$scope.page = 'Not changed'; 

Richtlinie HTML:

<tr ng-repeat="q in questions" ng-click="openDetail(q.id)"> 

"Fragen Liste" Richtlinie:

scope: { 
    page : '=' 
}, 
... 

scope.openDetail = function (id) { 
    scope.page = 'question_detail'; 
}; 

---

In other examples sind die ng-click Handler immer an den Controller gebunden. In meinem Fall muss ich ein Ereignis aus der Direktive auslösen, den Richtwert ändern und den Controller aktualisieren lassen.

Answer 1

Sie den übergeordneten Bereich Eigentum passieren sollte über Richtlinie des Elements Attribut zu binden:

<questions-list page="page"></questions-list> 

Hier die demo.

Answer 2

habe ich eine Probe App für Sie

var app = angular.module('test', []); 
 

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

 
    $scope.page = "Parent controll"; 
 

 
}); 
 

 
app.directive('questions', function() { 
 

 
    return { 
 
    scope: true, 
 
    controller: ['$scope', 
 
     function($scope) { 
 

 
     } 
 
    ] 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="test" ng-controller="testCon"> 
 
    {{page}} 
 

 
    <questions>{{page}}</questions> 
 

 
</div>

Answer 3

ich mistacke auf Ihrem html sehen:

<tr ng-repeat="q in questions ng-click="openDetail(q.id)"> 

muss von

<tr ng-repeat="q in questions" ng-click="openDetail(q.id)"> 

ersetzen werden 10

Es fehlt ein Zitat.

Und für das Problem verwenden Sie einen primitiven Typ, um auf directve zu binden. Versuchen Sie, den Wert in ein Objekt in Ihrem übergeordneten Bereich zu kapseln:

$scope.page = { value: 'Not changed' }; 
<questions page="page.value">...</questions> 

Answer 4

Ich kann Ihnen verschiedene Methoden dabei geben.

Sobald betrachten Sie Ihre Werte von Controller passieren muss

wie

scope: { 
    page : '=' 
}, 

dann

Sie können nicht darauf zugreifen Umfang müssen Eltern auf die Richtlinie, damit Ihr Kind Umfang transcluden daher, aber es scheint veraltet in einigen Versionen.

Daher empfehlen wir, die Seitenvariable mit $ rootScope zu teilen.Seite erste inject $ rootScope in beiden Controller und Richtlinie Injections und verwenden

{{$root.page}} // in controller 

// und in Richtlinie Funktion dieser Änderung

scope.openDetail = function (id) { 
    $rootScope.page = 'question_detail'; 
}; 

auch machen, wenn Sie andere Möglichkeiten, wie #BROADCAST oder #EMIT brauchen (wirklich große Sache in AngularJS)

/// in Richtlinie

$rootScope.$emit("emitName", {page:"page value" }); 

// in Controller

$rootScope.$on("emitName",function(event,data){ 
     $scope.page = data.page; // this comes from directive and assign to current scope's page variable 
    }); 

Bitte lassen Sie mich wissen, ob jemand für Sie arbeitet sonst können wir mehr Forschung.

khajaamin