CODEWITHSUNDEEP
jqueryangularjs
Tanzy
Tanzy

Reputation: 710

AngularJs & jQuery loaded htmls

Currently I have an app that is using C# MVC5 and jQuery. I'm looking to slowly move bits of it to be using AngularJs.

I have some jQuery loading a Html element via the .load method. What I would like to do is place an angularjs app within this loaded html. This html could be in several places on the page, as we have a number of tabs that it is dynamically loaded onto.

Is this possible?

Update

  1. Added the angularjs files to the app and they are getting included fine.
  2. Added a basic angular app & controller to the project and that is getting included fine

  3. I add a data-ng-app & data-ng-controller to 2 divs

    < div data-ng-app="testApp" > < div data-ng-controller="testCtrl as test" > {{test.title}} < /div > < /div >

However, the testCtrl is not getting used and the dating-controller stays in the div, with the {{}} not getting replaced with the text. Any idea what I'm doing wrong?

Just created a sample app that shows what is happening

Sample App

Plunker example

Upvotes: 1

Views: 1194

Answers (4)

Andrew Church
Andrew Church

Reputation: 1391

You'll just need to include the angular scripts in your MVC5 app, and the proper directives to bootstrap the angular app. Then, in the html that you're loading via .load that you'd like to control with angular, start adding your functionality there via directives in your angular app or via ng-controller.

Edit

Since you can only bootstrap one angular app per document, I'd recommend putting your ng-app directive on the html or body tag of your MVC app. Per some of the other answers, this will allow your angular app to be bootstrapped immediately. The other way you could do it is wrap the section of your MVC app with a div like so:

<!-- Section Loaded with your MVC app -->
<div ng-app="testApp">
    <!-- INSERT HTML WHEN LOADED FROM JQUERY HERE -->
</div>

This would allow angular to bootstrap your app immediately.

Upvotes: 0

Tong Shen
Tong Shen

Reputation: 1367

I think the issue is that, your angular.js gets loaded before it could see any ng-app, ng-controller attrs, as the HTML is loaded through jQuery.

What you may try is to manually bootstrap AngularJS after the HTML get loaded.

Add this to the callback of your jQuery HTML loading:

angular.element(document).ready(function() {
  angular.bootstrap(document, ['testApp']);
});

Please refer to this:

https://docs.angularjs.org/guide/bootstrap

Upvotes: 1

chandu
chandu

Reputation: 2276

I think you are not initiated the Angular app.

Try this one.

var  Project = angular.module('testApp',[]);

Project.controller('testCtrl',["$scope",function($scope){
  $scope.title == "your title";

}]);

And change your html like this

< div data-ng-app="testApp" >
 < div data-ng-controller="testCtrl" > {{title}} < /div > 
< /div >

Upvotes: 0

anon
anon

Reputation:

Yes, you can have different angular controllers and templates to display content on page. You wouldn't even need the JQuery load, you could use use angular.

Upvotes: 0

Related Questions