0

我还是 Angular 和 elasticSearch 的新手。我的目标是键入一条新推文，然后在单击添加按钮后：推文将在弹性搜索中被索引）并且推文的表格结果将被更新。这是html：

<html ng-app="meetupAngularJSApp">
  <head>
    <meta charset="utf-8">
    <title>meetupAngularJS</title>
    <link rel="stylesheet" href="styles/bootstrap.css">
    <link rel="stylesheet" href="styles/main.css">
    <script src="bower_components/angular/angular.js"></script>
    <script src="scripts/app.js"></script>
      <script src="scripts/elastic.js"></script>
      <script src="scripts/elastic-angular-client.js"></script>
  </head>
  <body class="well" ng-controller="myController">
    <h1>New tweet</h1>
    <form name="tweetForm">
        Comment : <input type="text" ng-model="libelle"/>
        <button class="btn btn-primary" ng-click="add()">Send</button>
    </form>
     <p>Results</p>
    <p>total={{results.hits.total}}</p>
    <table class="table table-striped table-hover">
    <thead>
    <tr>
        <th>id</th>
        <th>Message</th>
    </tr>
    </thead>
        <tbody>
    <tr ng-repeat="result in results.hits.hits">
        <td>{{result._id}}</td>
        <td>{{result._source.message}}</td>
    </tr>
    </tbody>
    </table>
  </body>
</html>

这是我的 javascript 文件：

'use strict';

var meetup = angular.module("meetupAngularJSApp",["elasticjs.service"]);

meetup.controller('myController', function myController($scope, ejsResource){
    localStorage.clear();

    /* instantiate (takes an optional url string) */
    var ejs = ejsResource('http://localhost:9200');

    var client = ejs.Request().size(50)
        .indices('twitter')
        .types('tweet');

   function search(callbackFn){

       $scope.results= client
                .query(ejs.MatchAllQuery())
                .doSearch(callbackFn);

   }

search(function(){

        console.log('Search success') ;
    });



    $scope.add = function (){
        var hello = ejs.Document('twitter', 'tweet')
            .source({
                message: $scope.libelle
            });
        hello.doIndex(function(){
            console.log('Success indexing');
            console.log('New search');
            search(function(){
                    console.log('Search success 2') ;
                });

        });
    }
});

我的问题是：当我点击“添加”按钮时，推文表不会自动更新。我必须刷新页面才能更新。我不明白的是，当我查阅控制台日志时，我有这个：

- XHR finished loading:            "http://localhost:9200/twitter/tweet". 
 - Success indexing
 - New search
 - XHR finished loading:             "http://localhost:9200/twitter/tweet/_search".
 - Search success 2

所以对我来说，代码执行得很好（因为它按顺序执行操作）所以 $scope.results 应该很好地更新。我不明白我必须点击什么刷新页面，我认为如果 $scope.results 发生变化，AngularJs 会自动呈现页面。

预先感谢您的帮助

4

1 回答 1

0

问题是您在 Angular 之外做了一些它不知道的事情。ejs.Document 和 hello.doIndex 必须执行 ajax 调用（或超时？），并且您必须让 angular 知道它们何时完成。

为了做到这一点，添加一个 scope.$apply(); 在回调中（如果可用），它可能如下所示：

    var hello = ejs.Document('twitter', 'tweet')
        .source({
            message: $scope.libelle,
            updateCallback: function(){ $scope.$apply(); }
        });

您可以在此处阅读 $apply() 方法http://docs.angularjs.org/api/ng.$ro​​otScope.Scope# $apply

于 2013-09-13T20:28:09.767 回答