Chapter 19, $sce.trustAsHtml (Pro AngularJS)

by mushirahmed

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.11/angular-sanitize.min.js"></script>
<body ng-app="exampleApp" ng-controller="defaultCtrl">
    <div class="well">
        
        <p ng-bind-html="trustedData"></p>
        
    </div>
    <input type="button" ng-click="clickme" value="clickme">
</body>

JavaScript

var exampleApp = angular.module("exampleApp", ["ngSanitize"]);

exampleApp.controller("defaultCtrl", function ($scope, $sce) {
  $scope.clickme = function(){
  	alert("dasd")
  };
 $scope.valueParm = "dasasd";
 $scope.htmlData = "<div class='form-group col-md-6'></div></br><div class='form-group col-md-6'><input compile ng-model='valueParm'  class='form-control' type='text'></div>";
 $scope.newHtml =  $sce.trustAsHtml(html);
    $scope.$watch("htmlData", function (newValue) {
        $scope.trustedData = $sce.trustAsHtml(newValue);
       console.log($scope.valueParm)
        
    }); 
    
    
 
    
});