angularjs click event in the ngBindHtml директива

У меня есть фрагмент кода кода angularjs here, где я могу связывать теги html с помощью директивы ng-bind-html. Но как я могу включить некоторые другие теги, как angularjs ng-click, id теги т.д., внутри директивы ngBindHtml какangularjs click event in the ngBindHtml директива

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

FYI, данные загружаются динамически с сервера и я должен использовать ng-bind-html внутри директивы ng-repeat, и мне нужно передать соответствующие идентификаторы, чтобы щелкнуть события примерно как ng-click="myFunction(x.id)", как в sample 2.

источник

2016-03-29 mpsbhat

Похоже, что это может привести к хакерам будучи в состоянии запустить ненадежный JavaScript/HTML на ваш сайт, который будет плохо. Вы можете включить статический контент (или динамический контент с вашего сервера, я полагаю), используя «ng-include» ... – mgilson

mglison является правильным, однако, если вы контролируете отображаемые данные и должны это делать, например, как templating в ячейке клиента на таблице данных (прецедент, который я использовал ранее). Затем вам нужно Угловая компиляция кода. Я посмотрю на jsFiddle. –

Как предлагалось @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>

источник

2016-03-29 10:40:38

angularjs click event in the ngBindHtml директива

ответ

Смежные вопросы