Working with $compile in angularjs

angularjs angularjs-compile
RJV picture RJV · Oct 18, 2016 · Viewed 14.8k times · Source

I am really confused with $compile in angularjs. can anyone help me, What use of $compile in angularjs with an example other then in this documentation. https://docs.angularjs.org/api/ng/service/$compile

Answer

user6743672 picture user6743672 · Oct 18, 2016

$compile just compile the text to html..

Here is sample example

 angular
                .module("myModule", [])
                .controller("myController", ['$scope', '$compile', function ($scope, $compile) {
                    $scope.txt = "<b>SampleTxt</b>";
                    $scope.submit = function () {
                        var html = $compile($scope.txt)($scope);
                        angular.element(document.getElementById("display")).append(html);
                    }
                }]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myModule" >
    <div ng-controller="myController">
        <textarea ng-model="txt" ></textarea>
        <input type="button" value="submit" ng-click="submit()" />
        <div id="display"></div>
    </div>
</body>

Related questions

What is the best way to pass functions between inner components in AngularJS 1.5?

I was wondering what is the best way to pass functions down through 2 or more levels of components? There's no simple way of skipping the function wrap when using '&' bindings? Here's an use case: angular.module('app', []).…

Read More
Can I get the compiled html of an Angular element?

I have compiled an element using the $compile service. If I add that directly to the DOM, it looks great and all of the bindings are correct. If I want that element as a string though, it shows {{stuffHere}} instead …

Read More
if else statement in AngularJS templates

I want to do a condition in an AngularJS template. I fetch a video list from the Youtube API. Some of the videos are in 16:9 ratio and some are in 4:3 ratio. I want to make a condition like this: if …

Read More