Controller method on button click of custom directive ? angular js

Question

I have my custom directive to upload file like this in parent HTML

<uploading-multiple-files controlmodel="serviceProfile.serviceProfileAttachments"
   upload-all-action="uploadAll"  delete-action="deleteImage"
   attachment-type-id="scopeTypeId" url="scopeUrl" enable-upload="enableUpload">
</uploading-multiple-files>

In parent controller the code for deleteAction is

  $scope.deleteImage = function (attachment) {

        alert(attachment.id);
   }

my uploadAllAction is working now I want to implement deleteAction in a similar way here is its implementation

function uploadingMultipleFiles(FileUploader, $rootScope, $http, $filter, $window, browser) {
    return {
        replace: false,
        scope: {
            'attachmentTypeId': '=?',
            'controlmodel': '=',
            'url': '=',
            'maxsize': '=?',
            'uploadAllAction': '=?',
            'deleteAction': '=?',
            "counter": '=?',
            "enableUpload": '=?',
            "isRequired": '=?'
        },
        templateUrl: '/app/views/Controls/UploadingMultipleFilesDirective/UploadingMultipleFilesDirectiveTemplate.html',
        link: link
    };

Now I want to initialize my method

  <div class="col-md-6" ng-repeat="item in controlmodelFiltered">
        <div class="col-md-12">
            <button class="info" ng-click="delete(item)">x</button>        
        </div>  
  </div>

So ng-click="delete(item)" in directive used to initialize the deleteAction

    scope.delete = function (attachment) {
        debugger;
        scope.deleteAction(attachment);    //error delete action is not defined           
    }

when I click delete button the directive js initialize the deleteAction with attachment and it should call controller method then defined in directive but I get the error

TypeError: scope.deleteAction is not a function

In general, avoid two-way, '=', binding in components. Instead use one-way, '<', binding for inputs and use expression, '&', binding for outputs. It will make the transition to Angular 2+ easier. For more information, see AngularJS Developer Guide - Component-based Application Architechture. — georgeawg
– georgeawg, Commented Oct 19, 2017 at 7:41

Alfredo Castañeda · Accepted Answer · 2017-10-19 08:40:23Z

0

You should passs the deleteAction as an action binding `deleteAction: '&', and then you can do something like

<button class="info" ng-click="deleteAction({item})">x</button>

And as mentioned I would recommend to avoid using two-way bindings when creating components.

answered Oct 19, 2017 at 8:40

Alfredo Castañeda

111 silver badge3 bronze badges

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

Collectives™ on Stack Overflow

Controller method on button click of custom directive ? angular js

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related