Obtenir la valeur de retour dans le rappel Angular js Directive

J'ai créé une directive dans Angularjs dans lequel j'ai besoin d'utiliser callBackMethod, afin que je puisse Contrôleur d'appel de la Fonction.

Du contrôleur de la fonction est appelée.Mais du Contrôleur de la Fonction retourne une valeur.Je veux obtenir cette valeur en fonction de rappel.Comment y parvenir?

Ci-dessous mon code pour la Directive

.directive('abcOption', function($compile) {
return {
    restrict : 'A',
    template : '<div class="filter-content"></div>',
    replace : true,
    scope : {
            callBackMethod:'&getDisplayName'
    },link: function(scope,element,attrs)
    {
        scope.getDataName =function(dataId)
        {
            scope.callBackMethod(dataId);
        };
}
    };
});

Code ci-dessous est pour la fonction de Contrôleur de

$scope.getDisplayName = function(columnName) {
return 'abc';
};

C'est petit extrait du code. Contrôleur de fonction est appelée, mais je n'obtiens pas de valeur de retour dans la directive de la fonction. Je suis undefined dans le journal de la console si je me connecte scope.callBackMethod(dataId);

Comment obtenir la valeur de retour à l'aide de callBackMethod dans la Directive?

OriginalL'auteur Jay Patel | 2013-11-21

Tout en appelant le contrôleur de fonction à partir de l'intérieur d'une directive avec un isolat champ d'application, vous devez passer un objet:

HTML

<div ng-app="myApp" ng-controller="ctrl">
    <div abc-option get-display-name="getDisplayName(columnName)"></div>
</div>

JS

var app = angular.module('myApp', []);
function ctrl($scope){
    $scope.getDisplayName = function(columnName) {        
        return 'abc';
    };
}
app.directive('abcOption', function($compile,$timeout) {
    return {
        restrict : 'A',
        template : '<div class="filter-content">abc</div>',
        replace : true,
        scope : {
            callBackMethod:'&getDisplayName'
        },
        link: function(scope,element,attrs){            
            /* send an object to the function */
            console.log(scope.callBackMethod({columnName:"hurray"}));           
        }
    };
});

Violon

Merci une tonne @CodeHater :Ça fonctionne
Vous êtes génial, merci!!
Je trouve ça vraiment bizarre que le nom de propriété d'objet doit être la même que la variable appelée à partir de l'annotation. Vraiment m'a jeté.
oui, c'est bizarre!!! néanmoins cela fonctionne !.....

OriginalL'auteur AlwaysALearner

La réponse de CodeHater fonctionne mais est (juste un peu) à confusion. J'ai donc mis à jour pour le rendre plus facile à comprendre

HTML

<div ng-app="myApp" ng-controller="ctrl">
    {{returnVal}}
    <div abc-option callback="setDisplayNameFn(mustBeTheSame)"></div>
</div>

var app = angular.module('myApp', []);
function ctrl($scope){
    $scope.setDisplayNameFn = function(whatever) {        
        $scope.returnVal=  whatever;
    };
}
app.directive('abcOption', function($compile,$timeout) {
    return {
        restrict : 'A',
        template : '<div class="filter-content"><b>directive html<b></div>',
        replace : true,
        scope : {
            callBackMethod:'&callback'
        },
        link: function(scope,element,attrs){            
            /* send an object to the function */
            console.log(scope.callBackMethod({mustBeTheSame:"value from directive"}));           
        }
    };
});

mis à jour le violon

Cette réponse, c'est parfait pour moi!! thx!!
ur de bienvenue, heureux il y a encore des gens à l'aide de ng1 comme moi à la fin de 2017. Cheers

OriginalL'auteur Phung D. An

Vous devez vous connecter pour publier un commentaire.