频道导航

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

2020-05-25 Angularjs 前端之家

前端之家收集整理的这篇文章主要介绍了angularjs – 在回调Angular js指令中获取返回值，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

我在 Angularjs中创建了一个指令,我需要使用callBackMethod,这样我就可以调用Controller的Function.

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

以下是我的指令代码

.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下面是Controller功能

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

这是代码的小片段.控制器函数被调用,但我没有在指令函数中获得返回值.如果我记录scope.callBackMethod(dataId),我在控制台日志中未定义;

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

@H_403_16@

在具有隔离范围的指令内调用控制器的函数时,需要传递一个对象：

HTML

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

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>',scope : {
            callBackMethod:'&getDisplayName'
        },attrs){            
            /* send an object to the function */
            console.log(scope.callBackMethod({columnName:"hurray"}));           
        }
    };
});

Fiddle