javascript - 如何以函数作为参数向动态生成的元素添加 Angular 属性？

Question

我对 JavaScript 和 AngularJS 比较陌生。

我一直在尝试使用以下代码将“ng-click”属性添加到以函数作为参数的链接元素:

var aTag1 = document.createElement('a');               
aTag1.setAttribute('ng-click', "setID(" + response.data[i].resultID + ")");

JavaScript 似乎承认该属性已添加到元素中，但单击链接时该函数并未运行。我确信有一个简单的答案，但由于某种原因我一直无法找到答案。

Answer 1

当您使用您的方法创建元素并设置属性时，请使用 $compile 编译新内容，然后追加。

var aTag1 = document.createElement('a');
aTag1.innerHTML = 'testing'
aTag1.setAttribute('ng-click', "setID(" + "'test'" + ")");
var test = $compile(aTag1)(scope);
element.append(test);

请检查下面的工作示例，这个逻辑也应该在 Angular Directive(指令)内完成，因为我们正在修改元素。

angular.module('components', []).directive('helloWorld', function($compile) {
  return {
    restrict: 'E',
    scope: {
      name: '='
    },
    template: '<span>Hello {{name}}</span>',
    link: (scope, element, attrs) => {
      var aTag1 = document.createElement('a');
      aTag1.innerHTML = 'testing'
      aTag1.setAttribute('ng-click', "setID(" + "'test'" + ")");
      var test = $compile(aTag1)(scope);
      element.append(test);
      scope.setID = function(value) {
        console.log(value);
      }
    }
  }
})

angular.module('myApp', ['components']).controller('myctrl', ['$scope', function($scope) {
  $scope.name = 'test';
}]);

.ng-scope {
  border: 1px red solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.min.js"></script>
<div ng-app="myApp" ng-controller='myctrl'>
  <hello-world name="name"></hello-world>
  <div>