How to bind html code with ng-... attributes

Question

I want to create <select ng-model='selected' ng-options='stage as stage.name for stage in stages'></select> element in variable as a string. As you see here, there are ng-... attributes inside the select element. If I use select element without ng-... attribute it is displaying without problem. If I use ng-... inside it, it's not showing anything. So, how do I make it display with ng-...? Please help.

My html code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/angular-sanitize.js"></script>
    <script src="Scripts/myScripts/index.js"></script>
</head>
<body>
    <div ng-app="myapp" ng-controller="myCtrl">
       <div ng-bind-html="htmlCode">
       </div>
    </div>
</body>
</html>

My js code:

var app = angular.module('myapp', ['ngSanitize']);

app.controller('myCtrl', ["$scope", function ($scope) {

    $scope.stages =
        [{ name: "Identification of Discontinuing Factors", value: 1 },
        { name: "Project Level Assessment", value: 2 },
        { name: "Organizational Readiness Assessment", value: 3 }];

    $scope.htmlCode = "<select ng-model='selectedStage' ng-options='stage as stage.name for stage in stages'></select>";
}]);

Sachila Ranawaka · Accepted Answer · 2017-05-10 09:17:51Z

you need to recompile the dom in order to work the ng- attributes. use this directive as an attribute to the ng-bind-html element.

.directive('dynamic', function ($compile) {
  return {
    restrict: 'A',
    replace: true,
    link: function (scope, ele, attrs) {
      scope.$watch(attrs.dynamic, function(html) {
        ele.html(html);
        $compile(ele.contents())(scope);
      });
    }
  };
});

Demo

var app = angular.module('myapp', []);

app.controller('myCtrl', ["$scope","$sce", function ($scope,$sce) {

    $scope.stages =
        [{ name: "Identification of Discontinuing Factors", value: 1 },
        { name: "Project Level Assessment", value: 2 },
        { name: "Organizational Readiness Assessment", value: 3 }];

    $scope.htmlCode = "<select ng-model='selectedStage' ng-options='stage as stage.name for stage in stages'></select>";
    
    $scope.trust = function(html){
       return $sce.trustAsHtml(html)
    }
}]);

app.directive('dynamic', function ($compile) {
  return {
    restrict: 'A',
    replace: true,
    link: function (scope, ele, attrs) {
      scope.$watch(attrs.dynamic, function(html) {
        ele.html(html);
        $compile(ele.contents())(scope);
      });
    }
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp" ng-controller="myCtrl">
       <div ng-bind-html="trust(htmlCode)" dynamic>
       </div>
       
       {{selectedStage}}
    </div>

Collectives™ on Stack Overflow

How to bind html code with ng-... attributes

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related