Geek Answers Handbook

How to bind javascript and ng-click event in html element using angular js?

I am trying to link the following json response in my html page. Json is as follows:

{
"key":{
"text":"<p>For more information, please visit  <a href = \"javascript:void(0);\" ng-click = \"customizeWindow('http://www.google.com');\">Support</a> .</p>"
}
}

html page

<div ng-bind-html="message"></div>

Controller code

$http({
       method: 'GET',
       url:'DAYS.json'

     }).success(function(responsedata) {
        $scope.message=responsedata.key.text;
      }).error(function(responsedata){});

configure the function of the internal window inside the controller

$scope.customizeWindow = function(url) {
        window.open(url, "_blank", "toolbar=yes, scrollbars=yes, resizable=yes,top=70, left=190, width=970, height=460");
    }

ng-bind-html binds the html tags, but it removes the javascript and ng-click event. I get only support when I check the item and the link is not working.

Please offer me a solution.

+4
source share
2 answers

, angular $sce → Strict Contextual Escaping. ng-bind-html, , , , JS. , , HTML.

:

angular.module('app', ["ngSanitize"]) // You have to include ngSanitize or it wouldn't work.
.controller('Ctrl', function ($scope, $sce){

$scope.htmlData = <p>For more information, please visit  <a href = \"javascript:void(0);\" ng-click = \"customizeWindow('http://www.google.com');\">Support</a> .</p> //Took from your example.

$scope.$watch("htmlData", function(newValue){
$scope.trustedData = $sce.trustAsHtml(newValuew);
  });
});

HTML:

<p ng-bind-html="trustedData"></p>

Angular :

(SCE) - , AngularJS , , . html, ng-bind-html. SCE.

1.2, angular SCE .

: Angular SCE - trustAsHtml

+2

ng-bind-html DOM . . , , html-, , ng-bind-html.

.

json, , / ( ), , angularJS Knockout, , Knockout ng-click. , http://www.google.com, ' , , .

 {
        "key":{
        "textsource": { 
                              source :  'http://www.google.com',
                              message : 'For more information, please visit  ' 
                       }
        }
     }

    <p>{{textsource.message}}<div  ng-click="customizeWindow(textsource.source)\">Support</div> </p>

, :

1) $sce,

 $scope.message = $sce.trustAsHtml(json.key.text);

2)

  $scope.init = function () {
            var el = document.getElementById("dynamic");
             $compile(el.childNodes[0])($scope);
        };

: ( ). , .

+1

More articles:


All Articles