Angular - Using a controller function in directive

Question

To start: I'm not having an error but try to optimize my code here.

I have an application where in many cases an address will be shown. This address should be editable in many cases. So I created a directive.

My directive

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

My directive template (address-view.html)

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

As you can see, I am passing the AddressCtrl.showAddressEdit() function in every directive... This is the function in my Address Controller, which triggers a popup in which I can edit the address.

My controller

app.controller("AddressController", AddressController);

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

function AddressController($scope) {

    var avm = this;
        avm.showAddressEdit = showAddressEdit;

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

My question

I'm trying to avoid passing this function AddressCtrl.showAddressEdit() to my directive all the time. Is it possible to use this function within my directive controller? So that everytime I use this directive, it would be usable as following:

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

Unrelated to your question, but 2 things: You're using the replace: true attribute, which is deprecated. Don't use it anymore. Which angular version are you on? Also, you could use a component instead of a directive, check it out: components — R. Wenger
– R. Wenger, Commented Feb 23, 2017 at 10:03
Also, please don't use ng-controller in your html, and don't use scope, but rather use the controllerAs syntax, if you want to improve your code — R. Wenger
– R. Wenger, Commented Feb 23, 2017 at 10:12

R. Wenger · Accepted Answer · 2017-02-23 10:10:22Z

1

You could use a Service, like this

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

Then, you can inject it to your Controller in the directive/component like this:

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

        $scope.showAdressEdit = myService.showAdressEdit;
}

answered Feb 23, 2017 at 10:10

R. Wenger

2983 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular - Using a controller function in directive

My question

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

My question

1 Answer 1

Comments

Related