angularjs click -Ereignis in der ngBindHtml-Direktive

Question

Ich habe ein angularjs Beispiel Code-Snippet here, wo ich die HTML-Tags mit ng-bind-html Direktive binden kann. Aber wie kann ich einige andere Tags wie AngularJS umfassen ng-click, id Umbau usw. innerhalb ngBindHtml Direktive wie

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

Mein Beispielcode ist hier:

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"); 
    }; 
}); 

FYI, die Daten werden dynamisch vom Server geladen Side-Skript und ich muss ng-bind-html innerhalb ng-repeat Direktive verwenden, und ich muss entsprechende IDs, um auf Ereignisse wie ng-click="myFunction(x.id)" wie in sample 2 klicken.

Answer 1

Wie vorgeschlagen @Dr Jones, müssen Sie $compile Direktive verwenden.

Live Beispiel auf 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>