Question

已经多次询问和回答了这个问题。但是，在尝试了很多事情之后，我仍然遇到了这个问题。

我在Angular中有一个带有搜索按钮的单页。该参数正在变得很好并且记录为console.log("searched: " + search.term);

然后我使用这个术语来使用REST查询我的数据库，结果很好。一切都好！

现在，我想用这些新结果更新$ scope数据。我通过添加$scope.$apply()并使用$timeout并使用$digest来做到这一点。

这一切都让我误以为： $ digest已在进行中

然后我使用了$ scope。$ watch这样可行，我使用警报对其进行了测试，但数据从未在我的浏览器中发生变化。

'use strict';

// Declare app level module which depends on views, and components
angular.module('Grep GUI', [
  'ngRoute',
  'myApp.view1',
  'myApp.view2',
  'myApp.version'
]).
config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
  $locationProvider.hashPrefix('!');

  $routeProvider.otherwise({redirectTo: '/view1'});
}]).
controller('DataBeest', function($scope, $http) {

    $http.get('http://localhost:8529/_db/grep/grepdata/huizen').
            then(function(response) {
                $scope.greeting = response.data;
            });

    $scope.search = function(search) {
      console.log("searched: " + search.term);

      $http.get('http://localhost:8529/_db/grep/zoek/zoek/' + search.term).
        then(function(response) {
                    $scope.greeting = response.data;
                    $scope.$digest()
        });
    }
});

index.html

<!DOCTYPE html>
<!--[if lt IE 7]>      <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="grep GUI" class="no-js"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>My AngularJS App</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
  <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="app.css">
  <script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>

  <div class="navbar navbar-inverse navbar-static-top" role="navigation">

      <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" rel="home" href="/" title="grep Crawler">/Grand Theft grep</a>
      </div>

      <div class="collapse navbar-collapse navbar-ex1-collapse">

          <ul class="nav navbar-nav">
              <li><a href="/alle_data">/alle_data</a></li>
              <li><a href="/alle_plaatjes">/alle_plaatjes</a></li>
              <li><a href="/nog_wat">/nog_wat</a></li>
          </ul>

          <div class="col-sm-3 col-md-3 pull-right"  ng-controller="DataBeest">
          <form class="navbar-form" role="search">
          <div class="input-group">
              <input type="text" class="form-control" placeholder="Zoek" name="srch-term" id="srch-term" ng-model="search.term">
              <div class="input-group-btn">
                  <button class="btn btn-default" type="submit" ng-click="search(search)"><i class="glyphicon glyphicon-search"></i></button>
              </div>
          </div>
          </form>
          </div>

      </div>

  </div>

<div class="container" ng-controller="DataBeest">
  {{ greeting }}
</div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
  <script src="app.js"></script>
  <script src="components/version/version.js"></script>
  <script src="components/version/version-directive.js"></script>
  <script src="components/version/interpolate-filter.js"></script>
</body>
</html>

Answer 1

好吧发现了，我在视图中重新使用了控制器，这让它变得一团糟......

更新$ scope，正在进行摘要

1 个答案: