CODEWITHSUNDEEP
javascriptjqueryangularjsangularjs-directivedirective
user3385597
user3385597

Reputation: 1

How to add angular js module inside an existing application

I am trying to add an angular JS module inside an already existing code. I'm actually trying to add a new piece of code inside it. The workflow goes like this. When a button is clicked, the JS takes a template and adds it to the dom. In this added template, i would like to insert the new angular JS module. I am trying to atleast show hello world inside the module but haven't been successful.

Let's say when a button is clicked, i'm adding the below tag to the dom

<div patient-details ng-controller='patientDetailsCtrl' id='patientDetails'></div>

This is added through jquery or javascript. How do i make it work with the below directive

angular.module('patientDetailsModule',[])
.directive('patientDetails',function($compile){
    return{
        //restrict: 'E',
        template: "<div>Hello World!!!{{name}}</div>"
    };
});

Upvotes: 0

Views: 491

Answers (1)

jmbmage
jmbmage

Reputation: 2547

You need to use $compile. $compile() will make sure all the Angular code in your html snippet will be compiled!

Here is an example.

http://plnkr.co/edit/7Wr3oAtvZ8cn31uFFEOs?p=preview

  • Send Message from nc-click to directive

  • Directive receives message, compiles html and appends new element

                var template = "<div patient-details ng-controller='patientDetailsCtrl' id='patientDetails'>Element added</div>";
            var newElement = angular.element(template);
            $compile(newElement)(scope);
            element.append(newElement);
            // can also use element.replaceWith(newElement);

Upvotes: 1

Related Questions