javascript - Angular - 在指令中使用 Controller 函数

Question

首先:我没有遇到错误，但尝试在此处优化我的代码。

我有一个应用程序，在很多情况下都会显示地址。在许多情况下，该地址应该是可编辑的。所以我创建了一个指令。

我的指令

app.directive('addressview', function(medipracticeData) {
    return {
        restrict: 'E',
        templateUrl: 'address-view.html',
        replace : true,
        scope : {
            address : '=',
            editAddress : '&?'
        },
        controller : function($scope){
            $scope.edit = function(){
                $scope.editAddress( { address : $scope.address } );
            }
        }
    };
});

我的指令模板 (address-view.html)

<div ng-controller="AddressController as AddressCtrl">
    <addressview
        address="OfficeCtrl.office.address"
        edit-address="AddressCtrl.showAddressEdit(address)">
    </addressview>
</div>

如您所见，我在每个指令中传递 AddressCtrl.showAddressEdit() 函数...这是我的地址 Controller 中的函数，它会触发一个弹出窗口，我可以在其中编辑地址。

我的 Controller

app.controller("AddressController", AddressController);

AddressController.$inject = ["$scope"];

function AddressController($scope) {

    var avm = this;
        avm.showAddressEdit = showAddressEdit;

    function showAddressEdit(address) {
        console.log(address);
    }
}

我的问题

我试图避免一直将此函数 AddressCtrl.showAddressEdit() 传递给我的指令。是否可以在我的指令 Controller 中使用此功能？这样每次我使用这个指令时，它都可以按如下方式使用:

<div ng-controller="AddressController as AddressCtrl">
    <addressview
        address="OfficeCtrl.office.address">
    </addressview>
</div>

Answer 1

您可以使用这样的服务

angular.module("myModule").service("myService", function(){
    return {
        showAddressEdit: function(address) {
            console.log(address);
        }
    };
});

然后，您可以将其注入(inject)到指令/组件中的 Controller 中，如下所示:

// ...
controller : function($scope, myService){
        $scope.edit = function(){
            $scope.editAddress( { address : $scope.address } );
        }

        $scope.showAdressEdit = myService.showAdressEdit;
}