javascript - Angular ng-click 事件未触发

Question

我有一个函数可以在调用时将某些 html 添加到我的页面:

function htmlAppend(i)
       {
        dynamicHtml = dynamicHtml + '<div id="list_item_wrapper">' + 
        '<div class="list_item_template" id="list_image_wrapper">' +
        '<img class="list_image_style" ' +
        'src=" ' + jsonData.cars[i].ImgURL  + ' "/>' +
        '</div>' +
        '<div class="list_item_template white_font car_details_wrapper">' +
         jsonData.cars[i].CarName+ '<br>' +
         jsonData.cars[i].Brand  + '<br>' +
         jsonData.cars[i].Model  + '<br>' +
         jsonData.cars[i].FuelType + '<br>' + 
        '<span style="font-size:40px;">' +
        '&#8377; ' + jsonData.cars[i].Price + 
        '</span> <br> ' +
        jsonData.cars[i].Experience +
        '<input type="button" id="buy_now_btn" class="button1" ng-click="alert("hi")">Buy</button>' +
        '</div>' +
        '</div>'
       }

问题: 现在这个 html 在我的页面中正确显示，但由于某种原因，当我将其替换为onClick 然后 onClick 触发。我不明白为什么 ng-click 没有触发，有人可以帮忙吗？

附加信息:htmlAppend 是一项服务的私有(private) 函数，根据某些用户输入从 Controller 调用。

Answer 1

不，你不能只在你的 ng-click 上写 alert。当您在 ng-click 指令上编写 alert("hi") 时，它会自动在您的 Controller 中查找名为 $scope.alert() 的方法.这就是 onClick 起作用的原因，因为它只是普通的旧 JavaScript，而 ng-click 涉及范围绑定(bind)。

在你的 Controller 中，这样写:

  $scope.alert=function(string){
    alert(string);
  };

然后你就可以开始了。这是工作 plnkr .

编辑:没有仔细阅读您正在动态绑定(bind)它。更新了 plnkr。

对于这种情况，您需要编译它:

  var $el = $('<button ng-click=' + 'alert("hello")' + '>I am a button</button>');
  $compile($el)($scope).appendTo('#testing');

其中 #testing 可以是您想要的任何 DOM 选择器。

重点还是要告诉你，你不能只在 ng-click 指令中编写 alert。

额外的好处:不要在 Controller 中编写 DOM 操作逻辑。您可能想改用指令。