Angular not working on div loaded with jquery load function

Question

I have master page which has script for angularJs and a div which acts as a parent div to load the html page which is created using angular.

ParentPage.aspx

<script src="../../Scripts/angular.min.js" type="text/javascript"></script>
<!-- Controller For Angular Page -->
<script src="../../Scripts/Controller/PartialRegistrationController.js"  type="text/javascript"></script>

<script type="text/javascript">
    var app = angular.module("module", []);

    function partialRegistrationForm() { // Function to Initiate load call      
        $('#divFullRegistration').load('../RegistrationPages/PartialRegistration.htm', function (data) {
            console.log(data);
        });
</script>

<div id="divPopupRegistration" class="RegistrationPopup hide" style="overflow: hidden;z-index: 999" ng-app="module">
    <div id="divFullRegistration" class="Full hide">
    </div>
</div>

PartialRegistration.htm

<head>
    <title></title>
    </head>
<body ng-cloak>
    <div ng-controller="partialcontroller" id="parentDiv" ng-init="init()">
        <div class="registrationBg" runat="server" id="PartialRegistration">

        // Some HTML

        </div>
    </div>
</body>

I have some angular textbox and drop down which gets data from server. I can see empty dropdown in html page.

It works When i put <script type="text/javascript" src="../Scripts/angular.min.js"></script> in PartialRegistration.htm

But angular script is already loaded in ParentPage.aspx, so why this issue is coming ?

call your partialRegistrationForm func in your angular app.run function. — YOU
– YOU, Commented Mar 26, 2015 at 13:17
It sounds like you really want a directive called partial-registration that uses PartialRegistration.htm as its template. If you only want to load after something has happened in scope, you can use ng-if for that. — Austin Mullins
– Austin Mullins, Commented Mar 26, 2015 at 13:22
why don't bind load event from directive on that divFullRegistration element. — Pankaj Parkar
– Pankaj Parkar, Commented Mar 26, 2015 at 13:27

Raulucco · Accepted Answer · 2015-03-26 13:47:06Z

4

The problem is that angular is not notified that anything just happened. You must create a directive or use the $compile service and pass any $scope before adding the template

$compile(html)($scope);

answered Mar 26, 2015 at 13:47

Raulucco

3,4261 gold badge23 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Daniel Bonnell Over a year ago

This solution worked perfectly for me. I wrapped my jQuery in this like so: $compile($('#profile-builder').html(resp.data.html))($scope);.

Pankaj Parkar · Accepted Answer · 2015-03-26 13:47:46Z

1

I believe you should bind event using directive rather than using jQuery code

Markup

<div id="divFullRegistration" class="Full hide" my-directive></div>

Directive

app.directive('myDirective', function(){
  return {
    restrict: 'AE',
    compile: function(element, attrs){
      //here your all jQuery code will lie to ensure binding
      element.load('../RegistrationPages/PartialRegistration.htm', function (data) {
        console.log(data);
      });
    }
  }
});

answered Mar 26, 2015 at 13:47

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Collectives™ on Stack Overflow

Angular not working on div loaded with jquery load function

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related