$scope 没有从控制器更新我的视图答案

【问题标题】：$scope not updating my view from controller$scope 没有从控制器更新我的视图
【发布时间】：2014-11-17 04:06:20
【问题描述】：

我已经达到了一个总块，并且可以真正使用一些洞察力来了解我在这里可能做错了什么。我在顶部有一个搜索栏，在它下面有一个视图区域来加载不同的模板。当 index.html 加载时，SearchController（在 search-controller.js 中）加载并等待提交。与此同时，ng-view 加载了 of-the-day.html，它利用 DailySearchController（在 daily-search-controller.js 中）来填充当日数据。 DailySearchController 和 SearchController 共享相同的服务 (search-service.js)。到目前为止，数据已填充并且一切正常。

现在，当我在输入字段中输入数据并点击提交时，client-search.html 模板加载到视图中（最多），表单数据发送到控制器，发送到服务（这似乎到目前为止还可以），然后回到控制器，我现在遇到了问题。我可以看到，在 chrome 插件 Batarang 中，json 数据确实到达了我的 $scope 对象，但它只是没有更新视图。

index.html

<html ng-app="MM">
...//everything included
<body>
<form ng-controller="SearchController" ng-submit="mmSubmitSearch()" class="submit-main" id="submitMain">
  <input ng-model="mmMdlSearchBox" class="mdl-search-box" id="mdlSearchBox" placeholder="find your quote..." type="text">
  </input>
  <input type="submit" class="btn-submit" id="btnSubmit" value="Search"></input>
</form>
<div ng-view></div>
</body>
</html>

客户端搜索.html

<ul class="ul-query">
  <li class="li-header"> QUOTE RESULTS...</li>
  <li ng-repeat="resource in mmClientReq.quotes | orderBy:clientList" class="li-resource">
    <p class="p-resource">{{resource.quote}}</p>
    <p class="p-resource-link">
    <a class="a-link" href="#/resource/search/link/version/{{resource.version}}/book/{{resource.book}}/chapter/{{resource.chapter}}"> Ch {{resource.chapter}}:{{resource.verse}}</a>
  {{resource.book}}, {{resource.version}}
    </p>
  </li>
</ul>

of-the-day.html

<ul class="ul-query">
  <li class="li-header"> SOURCE OF THE DAY</li>
  <li ng-repeat="resource in mmClientReqDaily.quotes | orderBy:clientList" class="li-resource">
    <p class="p-resource">{{resource.quote}}</p>
    <p class="p-resource-link">
      <a class="a-link" href="#/resource/search/link/version/{{resource.version}}/book/{{resource.book}}/chapter/{{resource.chapter}}"> Ch {{resource.chapter}}:{{resource.verse}}</a>
  {{resource.book}}, {{resource.version}}
   </p>
  </li>
</ul>

daily-search-controller.js

angular.module('MM.ControllerModule')
  .controller('DailySearchController', ['$http', '$scope', 'SearchService', 
    function ($http, $scope, SearchService) {
      getDailyReq();
      function getDailyReq() {
        SearchService.getDailyReq()
          .success(function(data) {
            $scope.mmClientReqDaily = data;
          })
          .error(function(data) {
            ...
          });
      };
}]);

搜索控制器.js

angular.module('MM.ControllerModule')
  .controller('SearchController', ['$scope', '$location', 'SearchService',
    function ($scope, $location, SearchService) {
      $scope.mmSubmitSearch  = function() {
        var userData = this.mmMdlSearchBox;
        $location.path('/resource/search');
        SearchService.getSearch(userData)
          .success(function(data) {
            $scope.mmClientReq = data;
          })
          .error(function(data) {
            ...
          });
      };
}]);

搜索服务.js

angular.module('MM.ServiceModule')
  .service('SearchService', ['$http', '$location',
    function ($http, $location) {

        var searchBaseURL = ('/resource/search/client-search?text=');
        this.getDailyReq = function() {
            return $http.get($location.path());
        };
        this.getSearch = function(searchURL) {
            return $http.get(searchBaseURL + searchURL);
        }
}]);

client-search.html 模板在视图中加载，但仅显示标题，不显示其他所有内容。

【问题讨论】：

我对此并不完全确定，但您可能会成为 dot-in-model 的受害者。尝试将所有数据添加到 $scope.myModel 而不是 $scope。或者显式地将 data 属性添加到 $scope 以便 Angular 知道它已更改。
你有没有机会把它塞进去，这样我就可以拉小提琴了？（或者摆弄这个，这样我就可以把它搞砸了）
您可以尝试$scope.$apply 触发摘要循环。
感谢大家这么快的回复。 CaspNZ：我明白你的意思，但我无法理解你对你的建议的实施。你介意指出你可以在哪里（包括 $scope.model 和明确地）添加这些吗？

标签： angularjs angularjs-scope angularjs-ng-repeat

【解决方案1】：

我对正在发生的事情的解决方案是简单地创建另一个控制器来显示数据。搜索栏控制器从视图中获取数据并将其存储在服务中。分配给 of-the-day.html 的新控制器抓取服务中存储的数据并显示它。

我认为无论如何这是处理这种情况的更好方法，因为可以防止搜索控制器同时管理主页和模板。谢谢大家的意见。

【讨论】：