CODEWITHSUNDEEP
javascriptjqueryajaxangularjs
zerzer
zerzer

Reputation: 602

angular Controller in ajax loaded content

i have this files under my project and i'm encountring some trouble loading them with ajax and applying angular , here is the plunk : http://plnkr.co/MxXzlenAuGcDy8iljKYX

the problem is that the content of sidebar.html get loaded and the controller gets executed correctly but for products.html the content only gets loaded and the controller doesn't get executed. i am using this under chrome and i don't get any errors in my localhost console

Upvotes: 1

Views: 978

Answers (1)

shaunhusain
shaunhusain

Reputation: 19748

I put together a modified version of your plnkr to show how I would approach this in general with Angular and dropped out jQuery since it wasn't necessary here:

http://plnkr.co/edit/QgPUk1JMP1vaWtwgXGbw

HTML

<!DOCTYPE html>
<html>

  <head>
    <title></title>
    <script data-require="[email protected]" src="http://code.angularjs.org/1.2.14/angular.js" data-semver="1.2.14"></script>
    <script data-require="[email protected]" src="http://code.angularjs.org/1.2.14/angular-route.js" data-semver="1.2.14"></script>
    <script type="text/javascript" src="script.js"></script>
    <script type="text/javascript" src="category.js"></script>
    <script type="text/javascript" src="products.js"></script>
  </head>

  <body ng-app="myApp">
    <div ng-include="'sidebar.html'"></div>
    <div ng-view></div>
  </body>

</html>

JS

// Code goes here
var app = angular.module("myApp" , ["ngRoute"]);

app.config(function($routeProvider){
  $routeProvider
    .when("/products/:prodId",{templateUrl:"products.html"})
    .when("/products",{templateUrl:"products.html"})
    .when("/", {templateUrl:"home.html"})
    .otherwise({redirectTo:"/"});
  })

Upvotes: 1

Related Questions