CODEWITHSUNDEEP
javascriptjquery.netangularjsangularjs-directive
Nouman
Nouman

Reputation: 3

Controller method on button click of custom directive ? angular js

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

Upvotes: 0

Views: 102

Answers (1)

Alfredo Casta&#241;eda
Alfredo Casta&#241;eda

Reputation: 11

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.

Upvotes: 0

Related Questions