How we can use the angularjs scope variables in the html which we are appending into the html page via controller?

Question

I have the following code

var input = '<div class="form-group">{{variable}}</div>'

I have the above code which is written inside the controller. I want to push this element into the view and i want this variable value to bind from the controller ,but it is simply printing the same as {{variable}}. Can anyone tell me how to do this??

Does this answer your question? [how can we use $compile outside a directive in Angularjs](https://stackoverflow.com/questions/22370390/how-can-we-use-compile-outside-a-directive-in-angularjs) — Alon Eitan, Feb 26 '20 at 10:45
The above answer is using `$rootScope` but you can/should bind the scope of the controller — Alon Eitan, Feb 26 '20 at 10:46
$scope.data = $sce.trustAsHtml('
'+$scope.variable+'
'); and in Html ng-bind-html="data" — sourav satyam, Feb 26 '20 at 10:48
I am voting to leave this question open as the suggested duplicate has solutions that don't apply, introduce security risks, memory leaks, and other problems. - [From Review](https://stackoverflow.com/review/close/25458175). — georgeawg, Feb 26 '20 at 22:45

score 3 · Accepted Answer · edited Feb 26 '20 at 22:12

3

The ng-bind-html directive will bind the html and scope variable will be assigned to controller itself

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $sce) {
    $scope.variable = 'test'
    $scope.firstName = $sce.trustAsHtml("<h1>"+$scope.variable+"</h1>");
    
});

<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">

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

</body>

edited Feb 26 '20 at 22:12

georgeawg

48,608
13
72
95

answered Feb 26 '20 at 10:54

sourav satyam

980
5
11

While your solution will work, it's not a recommended approach (IMO) - It will not work if you will bind a directive to `h1` elements for example (It's probably not the case in this question, but still...) the [$compile](https://docs.angularjs.org/api/ng/service/$compile) service is the best way to go – Alon Eitan Feb 26 '20 at 10:57
What is point of binding the directive in controller then if that is the place where I am initializing the scope data..? Like ng-repeat can be simply achieved by applying for loop in controller. Although I checked this link [https://stackoverflow.com/questions/22370390/how-can-we-use-compile-outside-a-directive-in-angularjs] and found it useful. – sourav satyam Feb 26 '20 at 11:02
1

I don't have a solid example and I agree with your point. It's just that angularjs has a service specifically intended for this, that's why I commented. There's nothing wrong with your answer :) – Alon Eitan Feb 26 '20 at 11:04
1

I agree with [@sourav-satyam](https://stackoverflow.com/users/11834630/sourav-satyam) that if the only thing the code is adding to the HTML is scope variables, it is best done with the [`ng-bind-html`](https://docs.angularjs.org/api/ng/directive/ngBindHtml) directive. The AngularJS team made a deliberate decision to **not compile** AngularJS directives in the controller and likewise with HTML from the `ng-bind-html` directive. It introduces security risks that are best avoided. – georgeawg Feb 26 '20 at 22:29

georgeawg · Answer 2 · 2020-02-26T22:32:53.653

I agree with @sourav-satyam that if the only thing the controller is adding to the HTML is scope variables, it is best done with the ng-bind-html directive. The AngularJS team made a deliberate decision to not compile AngularJS directives in the controller and likewise with HTML from the ng-bind-html directive. It introduces security risks that are best avoided.

The only thing I would do differently is use a template literal:

$scope.firstName = $sce.trustAsHtml(`<h1>${$scope.variable}</h1>`);

The DEMO

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $sce) {
    $scope.variable = 'test'
    $scope.firstName = $sce.trustAsHtml(`<h1>${$scope.variable}</h1>`);        
});

<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">

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

</body>

How we can use the angularjs scope variables in the html which we are appending into the html page via controller?

2 Answers2

The DEMO