2014-09-02 3 views
1

텔레콤 앱 대시 보드를 만듭니다. Logstash 및 Elastic 검색을 사용하여 로그를 가져 와서 Angularjs의 ng-Table 지시문을 사용하여 UI에 표시하려고합니다.다른 모듈의 컨트롤러간에 데이터 전달

로그를 얻을 수 있지만 문제는 다른 모듈의 두 컨트롤러간에 응답을 보내는 것입니다. 여기

탄성 검색에서 로그를 검색

, 코드입니다 : 우리는 데이터가 QueryController에서 얻은 안타를 즉 전달해야

// We define an EsConnector module that depends on the elasticsearch module.  

var EsConnector = angular.module('EsConnector', ['elasticsearch']); 

// Create the es service from the esFactory 
EsConnector.service('es', function (esFactory) { 
    return esFactory({ host: 'localhost:9200' }); 
}); 

// We define an Angular controller that returns the server health 
// Inputs: $scope and the 'es' service 

EsConnector.controller('ServerHealthController', function($scope, es) { 
es.cluster.health(function (err, resp) { 
     if (err) { 
     $scope.data = err.message; 
    } else { 
     $scope.data = resp; 
    } 
}); 
}); 
// We define an Angular controller that returns query results, 
// Inputs: $scope and the 'es' service 
EsConnector.controller('QueryController', function($scope, es) { 
// search for documents 
    es.search({ 
    index: 'logstash-2014.08.29', 
    size: 500, 
    body: { 
    "query": 
     { 
      "match": { 
       "CallId":-1   } 
     }, 
    }  
    }).then(function (response) { 
     $scope.hits = response.hits.hits; 
    }); 

}); 

(의 EsConnector 모듈) MainController에 (응용 프로그램의 모듈) 여기

앱 모듈입니다 : -

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

app.controller('MainController', function($scope, ngTableParams){ 
$scope.query = {} 
$scope.queryBy = '$' 
var data = ; \\ we want to populate 'data' with 'hits' of QueryController 
    $scope.tableParams = new ngTableParams({ 
     page: 1,   // show first page 
     count: 10   // count per page 
    }, { 
     total: data.length, // length of data 
     getData: function($defer, params) { 
     $defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count())); 
    } 
}); 

});

두 가지 방법은 두 모듈을 병합하는 것입니다.

감사합니다.

답변

0

여러 가지 방법으로 수행 할 수 있지만 가장 깨끗한 (느슨하게 결합 된 방식) 이벤트가 있습니다.

모듈이 동일한 페이지에로드되면 최소한 $ rootScope의 하위 노드라는 의미이며 $ rootScope에서 이벤트를 수신하고 발생시켜 이러한 정보를 전달할 수 있습니다 ($ rootScope. $ on ('myEvent',

덜 깨끗한 솔루션은 데이터 관리자 (AngularJS 서비스)를 사용할 수있는 솔루션이 아닐 수 있습니다. 이 정보를 저장하고 여러 위치에서 가져 오면 수신기 컨트롤러는이 service.getLogs()의 응답을보고 $ 값을 변경하면 최신 데이터를 갖게됩니다 (성능 측면에서 보면 조금 비싸기 때문에 실제로 권장하지는 않습니다) .

편집 : ca 그 정보가 도착할 때 특정 정보 블럭을 표시해야한다면 수신기 컨트롤러 데이터 모델을 ("$ scope.myModel.logs")와 함께 null로 표시하고 보여줄 블록에 ng-if 조건을 추가하면됩니다 myModel.logs 이러한 로그 (이벤트가 수신 될 때, 데이터 모델이 업데이트되고 블록이 표시됩니다)

0

당신이 내 이전 게시물의 하나 체크 아웃 할 수 있습니다 - 내가 추가 한

http://stackoverflow.com/questions/25301581/angular-js-newbie-link-in-a-controller-view-that-triggers-another-controller-a/25305951#25305951 

을 데모로 펑크 - http://plnkr.co/edit/1dhdPfmB1WwAkYhsz4Hv

+0

이것은 aa 모듈 내의 두 컨트롤러 용입니다. 두 모듈간에 데이터를 전송하려면 어떻게해야합니까? –

관련 문제