innerhtml ng-click not firing inside controller

Question

HTML:

<div id="selectedFiles"></div>

Controller:

var selDiv = document.getElementById("selectedFiles");


selDiv.innerHTML +=                         
                    "<span style='margin-right: 5px;'>" +
                    "<button id='deleteButton' ng-
                    click='deleteFile()' " +
                    "style='width: 70px;height: 25px;margin-left: 
                    10px;padding: 1px;'>Delete</button>" +
                    "</span><br/><br/>";

// this was added later but still no luck
$compile($(selDiv).contents())($scope);

function deleteFile() {
        // not getting fired
        console.log("inside delete file1");
    }

"ng- click='deleteFile()'" means you should deleteFile() under scope. Where you keep that? — Hanif, Jan 05 '18 at 09:50
@SergeK. I use it because I am generating data dynamically on file change. — sjain, Jan 05 '18 at 09:52
@MyGod You could put that in your HTML and add/remove it according to a `ng-if` condition. This is the point of using Angular. — Serge K., Jan 05 '18 at 09:52
@Aman, please see closely there are "ng-click". Also "$compile($(selDiv).contents())($scope);" — Hanif, Jan 05 '18 at 09:53
@Hanif. deleteFile() is inside same controller when I defined innerhtml. — sjain, Jan 05 '18 at 10:03
Then you try: $scope.deleteFile = function() {console.log("inside delete file1"); } — Hanif, Jan 05 '18 at 10:06
This is definitely not the right way to use Angular. Quit it and use jQuery if you want to handle your DOM like this. — Serge K., Jan 05 '18 at 10:10

score 0 · Accepted Answer · answered Jan 05 '18 at 10:28

0

Here is how you should do it, IMO :

var app = angular.module('myApp', []);

app.controller('ctrl', function($scope) {
  $scope.files = [];

  $scope.deleteFile = function(file) {
    var index = $scope.files.indexOf(file);
    
    if (index > -1) {
      $scope.files.splice(index, 1);
    }
  }
});

angular.module("myApp").directive("filesInput", function() {
  return {
    require: "ngModel",
    link: function postLink(scope,elem,attrs,ngModel) {
      elem.on("change", function(e) {
        var files = [];
        
        for (var i = 0; i < elem[0].files.length; i++) {
          files.push(elem[0].files[i])
        }
        
        ngModel.$setViewValue(files);
      })
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="ctrl">
  <input type="file" files-input ng-model="files" multiple />
  <div ng-repeat="file in files">
    <div>{{ file.name }} <a ng-click="deleteFile(file)" href="">Delete</a></div>
    <br/>
  </div>
</div>

Got the directive from here.

answered Jan 05 '18 at 10:28

Serge K.

5,303
1
20
27

Your code is correct. The only thing missing is the multiple file display functionality. If I click `Choose Files` and choose some file then it appears in the bottom with the option to `Delete`. Then when I again click `Choose Files` and choose some other file then file which was chosen earlier gone. I want previous files preserved as well. – sjain Jan 05 '18 at 10:38
I'm sorry, but I'm not getting paid to do it. You'll have code it yourself. – Serge K. Jan 05 '18 at 10:40
I did what you mentioned earlier and is mentioned in many online resources as well. The required one I tried is what not happening as mentioned in question. – sjain Jan 05 '18 at 10:41
If I have to select only single file then what's the use of `ng-repeat`. I can rather use object and render it. I want multiple files chosen to display. – sjain Jan 05 '18 at 10:43
I don't understand. If you want only one file to be selected, then remove the `multiple` attribute and go on. If you want, you can also remove the `ng-repeat` and bind `files[0]` in place or whatever you want. Otherwise, if you want multiple files to be shown, this is what I did here. And if you want to re-populate the input, take a look [here](https://stackoverflow.com/a/47522812/3054411) and apply it yourself :) – Serge K. Jan 05 '18 at 10:47
I don't believe the directive was so useful. I just kept `var files = [];` outside of my directive and it worked. Cheers! – sjain Jan 05 '18 at 10:47

innerhtml ng-click not firing inside controller

1 Answers1