Question

我想在Angular 1.2中做一个非常简单的事情：我想为我的自定义指令创建动态内容，并为其中的一部分添加一个单击处理程序（clickCustomer）。但是，当我按照以下模式执行此操作时，虽然clickCustomer函数在元素的作用域上可用，但在单击它时不会调用它。我在说我需要让Angular编译动态内容，但我不确定是否真的如此，如果是，那该怎么做。

'use strict';

angular.module('directives.customers')
.directive('customers', function () {
  return {
    restrict: 'A',
    replace: true,
    template: '<div class="customers"></div>',
    controller: function ($scope, $element) {
      var customers = ['Customer1', 'Customer2', 'Customer3'];
      var customersMapped = customers.map(function (customer) {
        return '<span ng-click="clickCustomer()" data-customer="' + customer + '">' + customer + '</span>';
      });
      var text = customersMapped.join(', ');
      $element.html(text);

      $scope.clickCustomer = function (event) {
        console.log('Customer clicked', event);
      }
    }
  };
});

Answer 1

你是对的，你需要使用$compile服务并编译附加的DOM元素，以便Angular设置事件和范围。

检查this fiddle。

Angular 1.2：自定义指令的动态内容：ng-click不起作用

1 个答案: