Question

我想在一个模块中向一个指令添加事件监听器，我想从另一个模块中的控制器调用该函数。我如何实现这一目标？我在下面添加了一些伪代码。希望很清楚我想要实现的目标。

Office.context.document.getSelectedDataAsync(Office.CoercionType.Text,
            function (result) {
                if (result.status === Office.AsyncResultStatus.Succeeded) {
                    vm.data.data = result.value;
                    //I call a angularJs service which post..
                   //return $http.post('https://stapi.local:8443/api/activities', vm.data);

                } else {

                }
            }
        );

Answer 1

我不认为你正在接近这种“Angular方式”。指令和控制器应该避免直接交互，有利于通过指令的DOM接口进行交互。即使有多个模块，这仍然有效。

通常，您将scope: { listenerCallback: '&' }用于指令Object。这可能看起来像：

myApp.directive( "myDirective", function( $document ) {
    return {
        restrict: "A",
        scope: { listenerCallback: '&' },
        link: function( scope, element, attr ) {
            // At an event I will call scope.listenerCallback();
        }   
    };
} );

回调在Controller中实现，如您所述：

anotherModule.controller( "myController", [ "$scope", function( $scope ) {
    $scope.testCallback = function(){ /* your callback function */ };
} ] );

这将通过DOM绑定：

<div my-directive listener-callback="testCallback();">button label</div>

以下是一个示例，使用您的基本代码和两个模块：http://jsfiddle.net/fmvh7vht/

如果您尝试附加多个回调，请考虑通过范围传递Promise或回调函数数组。

基本上，就我所见，实际上没有理由进入指令并使用它们的内容。这样做会被视为反模式，并且会混淆（后来，在代码维护期间）和脆弱。相反，这些实体通常通过共享/绑定scope接口进行交互。

从另一个模块控制器调用Angular指令函数

1 个答案: