AngularJS bind scope to html after ajax load() function

Question

After reading about it I understand that the html loaded through ajax is not bind to my angular app. I've tried 1.000 things but can't get 'customers-invoice.html' to understand angular. Any ideas will be much appreciated.

<body ng-cloak ng-app="myApp">
    <main id="main">
        <div ng-controller='Ctrl'>
            <a ng-click="openInvoice(data.invoiceRef)" class="btn">View</a>
        </div>
    </div>
</body>


var app = angular.module('myApp', []);
app.controller('Ctrl', function($scope, $compile) {
    $scope.invoice = {}
    $scope.openInvoice = function(ref) { 
        $scope.invoice.ref = ref;
        var html = $('#main');
        html.load('customers-invoice.html')
        $compile(html)($scope);          
    }
}

Pankaj Parkar · Accepted Answer · 2017-09-13 13:11:17Z

1

You could use ng-include directive in this case, it will do load html in that specified DOM with compiled DOM bindings ready for you. But since you want to get bindings of your Ctrl controller, you have to put that DOM it inside Ctrl controller div

<body ng-cloak ng-app="myApp">
    <main id="main">
        <div ng-controller='Ctrl'>
            <a ng-click="openInvoice(data.invoiceRef)" class="btn">View</a>
            <div ng-include="templateUrl"></div>
        </div>

    </div>
</body>

Code

$scope.openInvoice = function(ref) { 
    $scope.invoice.ref = ref;
    $scope.templateUrl = 'customers-invoice.html';     
}

edited Sep 13, 2017 at 13:11

answered Sep 13, 2017 at 13:05

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

1 Comment

ClaraG Over a year ago

I finally opted for this solution since it uses angular's own methods. Thanks

Sachila Ranawaka · Accepted Answer · 2017-09-13 13:07:48Z

1

you can use the $templateCache service to load the html file to the controller because the template is already loaded into the cache.

 var app = angular.module('myApp', []);
 app.controller('Ctrl', function($scope, $compile, $templateRequest, $sce) {
     $scope.invoice = {}
     $scope.openInvoice = function(ref) {
         var templateUrl = $sce.getTrustedResourceUrl('customers-invoice.html');

         $templateRequest(templateUrl).then(function(template) {
             $compile($("#main").html(template).contents())($scope);
         });
     }
 })

answered Sep 13, 2017 at 13:07

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

2 Comments

ClaraG Over a year ago

Thanks, but still cant render the modified scope

Sachila Ranawaka Over a year ago

its working, make sure to add jquery lib. plnkr.co/edit/bpBXDi7PC7gYBOgz3h0Y?p=preview

ClaraG · Accepted Answer · 2018-08-08 06:57:17Z

1

I have a better solution now! Instead of using $.ajax, just use $http (which i imagine it runs the digest cycle for you behind the scenes). Anyway, problem solved!

here is the link to the angulajs page explaining how to use $http https://docs.angularjs.org/api/ng/service/$http

answered Aug 8, 2018 at 6:57

ClaraG

3422 silver badges14 bronze badges

Comments

ClaraG · Accepted Answer · 2017-12-20 12:02:44Z

0

Ive finally manaed to underestand better the problem and solve it accordingly. Because we are executing code outside of Angular's knowledge, we need to compile the inserted html for it to see Angular, and then manually call $scope.$digest() to update the markup.

So this just does the trick:

$compile($('#idWhereIloadedContent').contents())($scope);

$scope.$digest();

answered Dec 20, 2017 at 12:02

ClaraG

3422 silver badges14 bronze badges

Collectives™ on Stack Overflow

AngularJS bind scope to html after ajax load() function

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related