Question

我是角色的新手，我正在尝试根据用户点击的链接将数据传递到控制器。我使用angular-ui路由，但控制器只被调用一次，我怀疑我可能错误地构造了我的解决方案。当前的解决方案有什么问题？我开始相信我可能会更好地将服务传递到控制器并使用ng-click HTML中的链接？建议将不胜感激。

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;
});

Answer 1

我看到的问题是 - 家长状态＆＃39;故事＆＃39; 的templateUrl名为＆＃39; index.html＆＃39; - 与每个孩子相同。

但是它包含锚点 <div ui-view=""></div> 吗？因为必须让孩子（unnamed视图）将其目标放在父母身上。

.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",

现在，每个故事的孩子都会被注入未命名的视图 ui-view=""

在此处查看：

Nested States & Nested Views

小引用，提取：

嵌套状态＆amp;观点

当应用程序处于特定状态时 - 当状态为＆＃34;活动＆＃34; - 其所有祖先状态也是隐式活动状态。下面，当＆＃34; contacts.list＆＃34;国家是活跃的，＆＃34;联系人＆＃34; state也是隐式活动的，因为它是＆＃34; contacts.list＆＃34;的父状态。

子状态会将其模板加载到父级的ui视图中。

Full Plunkr：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>

使用resolve / factory将数据传递到Angularjs控制器

1 个答案:

Nested States & Nested Views

嵌套状态＆amp;观点