Question

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

调用Controller的函数。但是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);
        };
}
    };
});

以下代码用于控制器功能

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

这是代码的小片段。控制器函数被调用，但我没有在指令函数中获得返回值。如果我记录undefined;

，我将在控制台日志中获得scope.callBackMethod(dataId)

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

Answer 1

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

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

Answer 2

CodeHater的答案有效，但（有点）令人困惑。所以我更新了它以便更容易理解

<强> HTML

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

<强> JS

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

updated fiddle

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

2 个答案:

HTML

JS