javascript - 如何在 angularJS Controller (IONIC) 中设置 ng-click

Question

我在 AngularJS Controller 中向 html 添加函数调用时遇到问题。

更新:好吧，我必须说得更具体一点:

我的问题是关于内部有按钮的传单弹出窗口。geojson 数据异步加载，我有一个“onEachFeature”函数来添加弹出窗口 - 该函数如下所示:(它很简单!)

.controller('MapCtrl', function($scope, $state) {
  function oef(feature, layer) {
    var bounds = layer.getBounds();
    var center = bounds.getCenter();

    var marker = L.marker(center).addTo(MAP);

    var popup = new L.Popup({
        autoPan: false,
        keepInView: true,
        closeButton: false,
        offset: new L.point(0, -5)
     }).setContent("<div><a ng-click='test()'>"+feature.properties.tooltip + "</a></div>");


   }

   //LOADING AND ADDING DATA TO MAP
   ....
   //END

   $scope.test = function(){
     alert("HI");
   }
});

有什么想法吗？

Answer 1

您需要编译您的 html，以便允许 Angular 解释 html 中的“Angular 代码”(请参阅​​ https://docs.angularjs.org/api/ng/service/ $compile)，否则它只是“Angular 世界”中的一个简单字符串。请参阅下面列出的示例。

angular.module('myapp', [])
  .controller('foo', function($scope, $compile) {

    var div = "<div><a ng-click='hello()'>Hi</a>";
    var parent = angular.element(document.querySelector('#target')).append(div)
    $compile(parent.contents())($scope);

    $scope.hello = function() {
      console.log("'Hi div' clicked: Hi!")
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<style type="text/css">
  .hand {
    cursor: hand;
    cursor: pointer;
  }
</style>

<div ng-app="myapp">

  <div ng-controller="foo">
    <div id="target" class="hand"></div>
  </div>

</div>