javascript - 从 jquery 到 angularjs

Question

我正在使用以下格式从本地主机获取 JSON 对象。 JSON 非常复杂且冗长，因此使用 jquery 填充 HTML 变得越来越复杂。

function processmsg(msg) {
        var jobj = JSON.parse(msg);
        if (typeof jobj === 'object')
        {
            // Parse the JSON
            }
            document.getElementById("messages").innerHTML = globalTag;

        }
    }

    function waitForMsg() {
        $.ajax({
            type: "GET",
            url: "1.json",

            cache: false,
            timeout: 50000,

            success: function (data) {
                processmsg(data);
                if (!data) {
                    setTimeout(
                        waitForMsg,
                        1000
                    );
                };
            },

            error: function (XMLHttpRequest, textStatus, errorThrown) {

                setTimeout(waitForMsg, 15000);
                processmsg("error");
            }

        });
    };

    $(document).ready(function () {
        waitForMsg();
        processmsg("loading");
    });

我想使用 {{jobj.entries}} 这样的格式。像这样的东西。这可以在 angularJS 上完成。你们能建议我如何在 Angular 上做同样的事情吗？

我想每 1 分钟查询一次 JSON，当找到数据时我想取消间隔。我不知道如何在 angularjs 中做到这一点。

==================更新================ 我得到了下面的代码片段。它工作正常，但是一旦获得 json 对象，我如何停止 url 查询..

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

    app.controller('jsonController', function($scope, $http) {

      $scope.getData = function(){
        var url = "{% static "" %}tmp/{{url_hash}}/{{url_json}}";
        $http.get(url)
          .success(function(data, status, headers, config) {
            console.log(data);
          });
      };
      if (!$scope.data){
        setInterval($scope.getData, 2000);
      }

这里的问题是 json 对象仅在 3 秒后可用。

Answer 1

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

app.controller('jsonController', ['$scope','$http','$timeout',function($scope, $http, $timeout) {

  $scope.getData = function(){
    var url = "{% static "" %}tmp/{{url_hash}}/{{url_json}}";
    $http.get(url)
      .success(function(data, status, headers, config) {
          if(!data)
             $timeout(function(){
                $scope.getData()
             }, 2000)
          else{
             $scope.myData = data.data? data.data:data;
             $scope.showError = false;
          }


      })
       .error(function(msg) {
          $timeout(function(){
              $scope.getData()
          }, 2000)
          $scope.processMessage(msg)
      });
  };
  $scope.processMessage = function(msg){
      if(angular.isString(msg))
       $scope.errorMessage = msg;
     else if(angular.isObject(msg)){
        $scope.errorMessage = msg.message // the property you want;
     }
     $scope.showError = true;
  }
  $scope.getData();
}])

HTML:

 <div ng-controller="jsonController">
      <div ng-show="showError">
        {{errorMessage}}
      </div>
      <div id="myDatacontainer">
           //you can bind any propery of your data by using angular direvtives
           //look at ng-bing, ng-if etc. directives
          {{myData.name}} ...
      </div>
 </div>

希望对您有所帮助。