2015-02-23 58 views
0

我是一個角度的新手,並試圖根據用戶點擊的鏈接將數據傳遞到控制器。我正在使用angular-ui路由,但控制器只有一次調用,我懷疑我可能錯誤地構建了我的解決方案。目前的解決方案有什麼問題?我開始相信我可能更好地將服務傳遞給控制器​​,並使用ng單擊HTML中的鏈接?建議將不勝感激。使用解決方案/工廠將數據傳遞到Angularjs控制器

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

回答

1

我看到的問題是 - 父狀態「故事」templateUrl稱爲「的index.html」 - 這是一樣的每一個孩子。

但它包含錨點<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

小引用,摘錄:

嵌套狀態&個視圖

當應用程序處於特定狀態時的狀態是「活動」 - 所有它的祖先狀態是隱含活性爲好。下面,當「contacts.list」狀態處於活動狀態時,「contacts」狀態也隱式激活,因爲它是「contacts.list」的父狀態。

子狀態會將它們的模板加載到它們父級的UI視圖中。

完全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> 
相關問題