Reliure bidirectionnelle avec champ d’application isolé ne fonctionnant pas dans AngularJs - angularjs, angularjs-directive

J'ai écrit une directive pour une liste déroulante simple. En cliquant sur une valeur, j'appelle une fonction et je mets à jour la valeur.

Si je connecte "scope. $ Parent.selectedItem", je peux voir la valeur. Mais cela n'est pas mis à jour dans le contrôleur parent.

Ceci est le code de la directive

app.directive("buttonDropdown", [function() {
var templateString =
"<div class="dropdown-button">"+
"<button ng-click="toggleDropDown()" class="dropbtn">{{title}}</button>"+
"<div id="myDropdown" ng-if="showButonDropDown" class="dropdown-content">"+
"<a ng-repeat="item in dropdownItems" ng-click="selectItem(item)">{{item.name}}</a>"+
"</div>"+
"</div>";

return {
restrict: "EA",
scope: {
dropdownItems: "=",
selectedOption: "=",
title: "@"
},
template: templateString,
controller: function($scope,$rootScope,$timeout) {
$scope.selectedOption = {};
$scope.showButonDropDown = false;
$scope.toggleDropDown = function() {
$scope.showButonDropDown = !$scope.showButonDropDown;
};

$scope.$watch("dropdownItems", function(newVal,oldval){
if(newVal){
console.log(newVal);
}
});

$scope.selectItem = function(item){
console.log(item);
$scope.selectedOption = item;
}
},
link: function(scope, element) {
scope.dropdownItems = scope.dropdownItems || [];
window.onclick = function (event) {
if (!event.target.matches(".dropbtn")) {
scope.showButonDropDown = false;
}
console.log(scope.$parent);
}
}
}
}]);

C'est mon HTML

<button-dropdown title="Refer a Friend" dropdown-items="dropDownList" selected-option="selectedItem"></button-dropdown>

C'est mon code de contrôleur

$scope.$watch("selectedItem",function(newVal,oldVal){

if(newVal){
console.log("*** New Val** ");
console.log(newVal);
}
});

Je n'ai pas compris une chose .. Si j'imprime "portée.$ parent.selectedItem ", j'ai pu voir la valeur. mais elle n'est pas mise à jour dans le contrôleur. Je n'ai pas compris, qu'est-ce qui me manque. Quelqu'un peut-il aider à ce sujet. Merci d'avance.

Réponses:

Essayez de cette façon

 1. Try to $emit the scope variable in directive.
2. get that in controller by using $on.


Directive:
$scope.$emit("selectedItem",scopeVariable);

Controller:
$scope.$on("selectedItem",function(event,newVal){
if(newVal){
// logic here
}
});