angularjs ngBindHtml 指令中的点击事件

Question

我有一个 angularjs 示例代码片段 here，我可以在其中使用 ng-bind-html 指令绑定 html 标签。但是我如何在 ngBindHtml 指令中包含一些其他标签，如 angularjs ng-click、id 标签等

<a href="javascript:void(0);" id="myLink" ng-click="myFunct()">Test</a>

我的示例代码在这里：

var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function($scope) {
    $scope.myText = "<a href='#' ng-click='someFunction()'>Test</a>";

    $scope.someFunction = function(){
    alert("Link Clicked");
    };
});

仅供参考，数据是从服务器端脚本动态加载的，我必须在 ng-repeat 指令中使用 ng-bind-html 并且我必须传递相应的 id 来单击类似 ng-click="myFunction(x.id)" 的事件如 sample 2.

Answer 1

按照@Dr Jones 的建议，您需要使用 $compile 指令。

jsfiddle.

上的实例

angular.module('ExampleApp', [])
  .controller('ExampleController', function($scope) {
    $scope.myText = "<button ng-click='someFunction(1)'>{{text}}</button>";
    $scope.text = "Test";
    $scope.someFunction = function(val) {
      console.log(val);
    };
  })
  .directive('bindHtmlCompile', function($compile) {
    return {
      restrict: "A",
      scope: {
        bindHtmlCompile: "="
      },
      link: function(scope, elem) {
        scope.$watch("bindHtmlCompile", function(newVal) {
          elem.html('');
          var newElem = angular.element(newVal);
          var compileNewElem = $compile(newElem)(scope.$parent);
          elem.append(compileNewElem);
        });
      }
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ExampleApp">
  <div ng-controller="ExampleController">
    <h3>
  Write code for test button
  </h3>
    <textarea cols="100" ng-model="myText"></textarea>
    <div bind-html-compile="myText">

    </div>
  </div>
</div>

angularjs ngBindHtml 指令中的点击事件

angularjs click event inside the ngBindHtml directive

angularjs

ng-bind-html