angularjs - 在回调中获取返回值 Angular js 指令

Question

我在 Angularjs 中创建了一个指令，其中需要使用 callBackMethod，以便我可以调用 Controller 的函数。

Controller 的函数被调用。但是 Controller 的函数正在返回一些值。我想在回调函数中获取该值。如何实现？

下面是我的指令代码

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

以下代码用于 Controller 功能

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

这是一小段代码。 Controller 函数被调用，但我没有在指令函数中获得返回值。如果我记录 scope.callBackMethod(dataId);

，我会在控制台日志中收到 undefined

如何在指令中使用callBackMethod获取返回值？

Answer 1

当从具有隔离范围的指令内部调用 Controller 的函数时，您需要传递一个对象:

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

Fiddle