Passing data into Angularjs controller using resolve/factory

Question

I'm a newbie at angular and am trying to pass data into a controller based on a link being clicked by the user. I'm using angular-ui routing but the controller is only ever called once and I suspect I may have structured my solution incorrectly. What is wrong with the current solution? I'm beginning to believe I maybe better passing the service into the controller and using ng-click on the links in the HTML? Advice would be appreciated.

ServiceDeskApp.factory("storiesService", function($http){
   return {
        getMyStories: function(){
            return $http.get('/stories');
        },
        getMyRequestedStories: function(){
            return $http.get('/stories?type=requester_id');
        },
        getMyOwnedStories: function(){
            return $http.get('/stories?type=owner_id');
        },
        getMyTestingStories: function(){
            return $http.get('/stories?type=tester_id');
        }
   }
});

$stateProvider
    .state('stories', {
      url:"/stories",
      templateUrl: "views/stories/index.html",
      controller: 'StoriesCtrl',
      resolve:{
        stories: function(storiesService){
            return storiesService.getMyStories();
        }
      }
    })
    .state('stories.requester_id', {
      url:"/stories/request",
      templateUrl: "views/stories/index.html",
      controller: 'StoriesCtrl',
      resolve:{
          stories: function(storiesService){
              return storiesService.getMyRequestedStories();
          }
      }
    })
    .state('stories.owner_id', {
      url:"/stories/own",
      templateUrl: "views/stories/index.html",
      controller: 'StoriesCtrl',
      resolve:{
        stories: function(storiesService){
            return storiesService.getMyOwnedStories();
        }
      }
    })
    .state('stories.tester_id', {
      url:"/stories/test",
      templateUrl: "views/stories/index.html",
      controller: 'StoriesCtrl',
      resolve:{
          stories: function(storiesService){
              return storiesService.getMyTestingStories();
          }
      }
  });

});

ServiceDeskApp.controller('StoriesCtrl', function( $scope, stories ){
  console.log('inside stories controller');
  $scope.stories = stories.data;
});

Community · Accepted Answer · 2020-06-20 09:12:55Z

The issue I see is - the parent state 'stories' has templateUrl called 'index.html' - which is the same as for each child.

BUT does it contain anchor <div ui-view=""></div> ? Because that is must for a child (with unnamed view) to have its target in parent.

.state('stories', {
  url:"/stories",
  // to test that, change this
  // templateUrl: "views/stories/index.html",
  // into this
  template: '<div ui-view=""></div>',
  ....
})
.state('stories.requester_id', {
  url:"/stories/request",
  templateUrl: "views/stories/index.html",

Now, every child of stories, will be injected into unnamed view ui-view=""

Check it here:

Nested States & Nested Views

small cite, extract:

Nested States & Views

When the application is in a particular state—when a state is "active"—all of its ancestor states are implicitly active as well. Below, when the "contacts.list" state is active, the "contacts" state is implicitly active as well, because it's the parent state to "contacts.list".

Child states will load their templates into their parent's ui-view.

Full Plunkr Here: http://plnkr.co/edit/7FD5Wf?p=preview

$stateProvider
  .state('contacts', {
    templateUrl: 'contacts.html',
    controller: function($scope){
      $scope.contacts = [{ name: 'Alice' }, { name: 'Bob' }];
    }
  })
  .state('contacts.list', {
    templateUrl: 'contacts.list.html'
  });

function MainCtrl($state){
  $state.transitionTo('contacts.list');
}

<!-- index.html -->
<body ng-controller="MainCtrl">
  <div ui-view></div>
</body>

<!-- contacts.html -->
<h1>My Contacts</h1>
<div ui-view></div>

<!-- contacts.list.html -->
<ul>
  <li ng-repeat="contact in contacts">
    <a>{{contact.name}}</a>
  </li>
</ul>

Collectives™ on Stack Overflow

Passing data into Angularjs controller using resolve/factory

1 Answer 1

Nested States & Nested Views

Nested States & Views

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Nested States & Views

Comments

Your Answer

Sign up or log in

Post as a guest

Related