HTML
<section>
<div>
<p>{{item}}</p>
</div>
</section>
controller.js
(function () {
var ctrl = function ($scope){
$scope.item = "test";
}
}());
This is my team's project. I cannot change how it is set up. The problem I am trying to solve is inserting the $scope.item into the html. How could I do this?
I added an id _item in section.
<section id="_item">
<div>
<p>{{item}}</p>
</div>
</section>
Write this below code inside the controller.js file.
angular.element(document.getElementById('_item')).append($compile("<div>
<p>{{item}}</p>
</div>")($scope));
Note: add dependency $compile.
I think this will help you.
This is one of the most basic ways to do it.
angular.module('myApp', [])
.controller('myController', function($scope){
$scope.item = 'test'
});
<div ng-app="myApp" ng-controller="myController">
<p>{{item}}</p>
</div>
UPDATE
[app.js]
myApp = angular.module('myApp', []);
[controller.js]
myApp.controller('myController', function($scope){
$scope.item = 'test'
});
<script type="text/javascript" src="app.js"></script> <script type="text/javascript" src="controller.js"></script>Add ng-controller="your_controller_name" to your HTML.
<section ng-controller="myController">
<div>
<p>{{item}}</p>
</div>
</section>
The title of the answer might be missleading. If you really want to append HTML with Angular JS, I think what you need is the ng-bind-html directive
https://docs.angularjs.org/api/ng/directive/ngBindHtml
your html code should be something like
<section>
<div>
<p ng-bind-html="item"></p>
</div>
</section>
the following conf in your controller
.controller('myController','$sce' function($scope, $sce){
$scope.item = $sce.trustAsHtml("<div> this is really appending HTML using AngularJS </div>");
});
