Angular jsデータ・ロム・コントローラをhtmlテンプレートに取得する方法は？

Question

私はangularjsで働いていて、apiから自分のhtmlテンプレートにデータを取得しようとしています。ユーザーがアンカータグをクリックすると、apiからhtmlテンプレートにデータが読み込まれます。

これは私がmyContacts htmlとコントローラと呼ばれているapp.jsでアンカータグのHTML

<a href="#/myConatct" ng-click="side.getMyContacts();">Contacts</a> 

です。

.state('myContacts', { 
      url: '/myContacts', 
      views: { 
      'TopMenuBar': { templateUrl: 'views/menu.html',controller: 'MenuCtrl' },   'MainContent': { templateUrl: 'views/myContacts.html',controller: 'contactCtrl' }      
      }    
      }) 

サービスアプリでは、私はAPIからデータを取得しています。

service.getMyContacts = function(){ 
      var config = { headers: { 
        'X-Auth-Token': $cookieStore.get('token') 
       } 
      }; 
      return $http.get(baseURL + '/allcontacts' , config); 
     }; 

次に、この機能をサイドバーコントロールで呼び出しました。

​​

コントローラファイルも作成しました。

app.controller('contactCtrl', ['$scope','$http','$rootScope', '$location', 'DataService', '$cookieStore', function ($scope,$http, $rootScope, $location, DataService, $cookieStore) { 

     $scope.getMyContacts = function(){ 
      var config = { headers: { 
        'X-Auth-Token': $cookieStore.get('token') 
       } 
      }; 
      return $scope.getContactsList = $http.get(baseURL + '/allcontacts' , config); 
     }; 

}]); 

これで、myContacts.htmlファイルでjson応答データを取得しようとしています。しかし、応答データをアラートで表示するhtmlファイルをロードしていません。

Answer 1

あなたのanchorタグ

<a href="#/myContact"">Contacts</a> 

そして、あなたのコントローラ内でmyContact間違って綴られてきました。その後、

app.controller('contactCtrl', ['$scope','$http','$rootScope', '$location', 'DataService', '$cookieStore', function ($scope,$http, $rootScope, $location, DataService, $cookieStore) { 

     $scope.getMyContacts = function(){ 
      var config = { headers: { 
        'X-Auth-Token': $cookieStore.get('token') 
       } 
      }; 
      DataService.getMyContacts().success(function (data) { 
       $scope.myContacts = data.results; 
      }); 
     }; 

}]); 

そして、あなたのHTML上の何かに$scope.myContactsをバインドします。

これを行うには良い方法は、あなたの状態で解決関数を定義することです。注：

.state('myContacts', { 
      url: '/myContacts', 
      views: { 
      'TopMenuBar': { 
       templateUrl: 'views/menu.html', 
       controller: 'MenuCtrl' 
      }, 
      'MainContent': { 
       templateUrl: 'views/myContacts.html', 
       controller: 'contactCtrl' }      
      }, 
      resolve: { 
       contactData: function(DataService) { 
       DataService.getMyContacts().success(function (data) { 
       return data.results; 
       }); 
      } 
      } 
      }) 

そして、あなたのコントローラでは、そのようなデータを挿入：

app.controller('contactCtrl', function(contactData) {....})