AngularJS Partial Reload

Question

I am trying to create an app (http://plnkr.co/edit/EVasje) which has two step linking & partials based on the example http://jsfiddle.net/cfulnecky/NRUxs/.

Now if you click on Cases, i get a list of cases and if i click on any cases the right panel is updated BUT only once. Clicking on the other links doesn't seem to reload the partial.

Any idea what am i doing wrong ? [part of code sample here]

var app = angular.module('plunker', []);

app.config(['$routeProvider', function($routeProvider) {    
    $routeProvider.when('/',                {template: { left : 'dashboard.html', right: ''}});
    $routeProvider.when('/cases',           {template: { left : 'cases.html', right: ''}});
    $routeProvider.when('/cases/view/:id',  {template: { left : 'cases.html', right: 'caseDetail.html'}});
    $routeProvider.when('/departments',        {template: { left : 'departments.html', right: ''}});
    $routeProvider.otherwise({redirectTo: '/'});     }]);

app.controller('AppController', ['$rootScope','$scope','$route', '$location','$controller', function ($rootScope,$scope,$route,$location,$controller) {            
    $rootScope.$on('$routeChangeStart', function(scope, newRoute, Current){                              
        if (!newRoute) return;                
        $rootScope.template = newRoute.$route.template;        
    });
    $scope.isActive = function(route) {      
        return route === $location.path();
    };      }]);    function CasesCtrl($scope,CaseFactory) {        $scope.cases = CaseFactory.getCases;   }

function CaseDetailCtrl($scope,$route) {    $scope.caseNum = $route.current.params.id; }

app.factory('CaseFactory', function() {   return {
    getCases:[{"project":{"id":3,"name":"Listings"},"updated_on":"2012-09-17T17:30:00Z","tracker":{"id":1,"name":"Bug"},"created_on":"2012-09-17T17:30:00Z","author":{"id":4,"name":"John Doe"},"id":22,"status":{"id":1,"name":"New"},"start_date":"2012-09-17","subject":"Check all the content with copy scape using APi","description":"","priority":{"id":4,"name":"Normal"}},{"project":{"id":3,"name":"Listings"},"updated_on":"2012-09-17T17:29:48Z","tracker":{"id":1,"name":"Bug"},"created_on":"2012-09-17T17:29:48Z","author":{"id":4,"name":"John Doe"},"id":21,"status":{"id":1,"name":"New"},"start_date":"2012-09-17","subject":"Scrap all the sites who have similar content","description":"","priority":{"id":4,"name":"Normal"}},{"project":{"id":6,"name":"Quran"},"updated_on":"2012-09-17T17:26:54Z","tracker":{"id":1,"name":"Bug"},"created_on":"2012-09-17T17:26:54Z","author":{"id":4,"name":"John Doe"},"id":20,"status":{"id":1,"name":"New"},"start_date":"2012-09-17","subject":"Add jQuery UI Layout to Admin Panel","description":"","priority":{"id":4,"name":"Normal"}}]     }; });

Help is greatly appreciated.

Thanks

Narretz · Accepted Answer · 2012-10-21 12:05:30Z

1

There seems to be a problem not so much with reloading the partial, but with telling angular that it should assign the new route id param to the scope. You have to tell the controller to watch the route and update the scope accordingly. This will work:

function CaseDetailCtrl($scope,$route, $rootScope) {
  $scope.caseNum = $route.current.params.id;  
  $rootScope.$on('$routeChangeSuccess', function(scope, newRoute, Current){                              
      $scope.caseNum = $route.current.params.id;     
  });
}

http://plnkr.co/edit/TaV3gT?p=preview

answered Oct 21, 2012 at 12:05

Narretz

4,9831 gold badge35 silver badges40 bronze badges

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

3 Comments

Mahbub Over a year ago

Hey, I figured that out already. In fact i asked the same question in mailing list but no one answered. I did exactly what you suggested. Thanks Anyway, I've accepted your answer :)

Narretz Over a year ago

Good that you found the solution. :) If you find the answer to your own question, you should post it as an answer for further reference. You can even accept your own answer!

Mahbub Over a year ago

Actually I was going to (as i did on the google mailing list) and i know i can answer my own question but saw you did it and thought i should just accept ;)

Collectives™ on Stack Overflow

AngularJS Partial Reload

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related