innerhtml ng-click不在控制器内触发

Question

HTML：

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

控制器：

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

Answer 1

你应该怎么做，IMO：

＆＃13;

＆＃13;

botchat.css

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

从here获得指令。