ngBindHtmlディレクティブ内のangularjsクリックイベント

Question

私はangularjsサンプルコードスニペットhereを持っています。ng-bind-htmlディレクティブを使用してhtmlタグをバインドできます。どのように私はangularjs ng-clickのようないくつかの他のタグを含めることができ、私のサンプルコード

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

ようngBindHtmlディレクティブ内部 idタグなどはここにある。しかし：FYI

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を使用しなければならないと私はのようにng-click="myFunction(x.id)"のようなイベントをクリックするそれぞれのIDを渡す必要があります。

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>