0

我一直在努力思考如何正确使用 angular $scope。我的应用程序在加载主页时根据从服务器收到的 json 数据中的 url 链接更新视图。

单击按钮时控制器会获取下一个数据文件，但我无法将此数据注入我的范围变量并更新视图。网络成功传输数据，因此我的服务正在运行。

在应用程序初始化后，我不明白如何让 $scope 解决 $resource 承诺并在我检索数据时更新视图。非常感谢您在此问题上的任何帮助。

我的列表控制器：

//View updates correctly when promise resolves
$scope.data = DataElements.get({}); 

$scope.nextPage = function (){ //Called when clicking 'next' button
var url = $scope.data.pager.nextPage; 

var pageNumber = url.split("page=").pop(); //Ugly but it is temporary, I promise..

//View doesnt update
DataElements.get({'page': pageNumber}, function(data){ 
    $scope.data = data; 
});

//Error: Digest already in progress
DataElements.get({'page': pageNumber }, function(data){ 
    $scope.$apply(function(){
      $scope.data = data; 
    });
});

//View doesnt update
$scope.data = DataElements.get({'page': pageNumber)};  

};

服务 ： 

services.factory('DataElements', ['$rootScope','$resource', function($rootScope, $resource){
    return $resource($rootScope.baseUrl+'api/:endPointAdr.jsonp', 
        {'endPointAdr': 'dataElements', 'page': '@page'}, 
        { get : {'method' : 'JSONP', 'params' : {'callback' : 'JSON_CALLBACK'}}     
    });
}]);

看法 ：

<section>
  <div>
    <h1>Search</h1>
    <input type="text" placeholder="Type something" autofocus>
    <input type="button" name="filter" value="Filter">
    <input type="button" name="clear" value="Clear">
    <div class="btn-toolbar" role="toolbar" aria-label="...">
      <a class="btn btn-default" href="#" aria-label="Previous Page">
        <span class="glyphicon glyphicon-chevron-left"></span>
      </a>
      <a class="btn btn-default" href="#" ng-click="nextPage()" aria-label="Next Page">
        <span class="glyphicon glyphicon-chevron-right"></span>
      </a>
    </div>
  </div>
  <div ng-controller="ListController">
    <ul class="" ng-show="data">
      <li class="" ng-repeat="element in data.dataElements ">
        <a href="#">
          <div class="info">
            <h2>{{element.name}}</h2>
          </div>
        </a>
      </li>
    </ul>
  </div>
</section>

服务器响应：

DataElements.get({}) == >
angular.callbacks._1({"pager": {"page":1,"pageCount":15,"total":706,"nextPage":"http// ...});(*)

DataElements.get({'page': 2})  == > 
angular.callbacks._2({"pager": {"page":2,"pageCount":15,"total":706,"nextPage":"http:// ...});(*)

(*) $resource 去掉 jsonp 并且只返回 json。

更新 ：

$scope.data如果我只在nextPage函数范围内分配，它就可以完美地工作。我知道该ng-click指令将此函数包装在$scope.apply(). 然后，显式调用 apply 会导致错误是有道理的。

解决方案 ：

<div ng-controller="ListController">创建了一个具有不同 $scope 的重复控制器。删除它解决了问题。有关详细信息，请参阅我的答案。

4

3 回答 3

1

如果DataElements.get返回一个 promise 对象，则需要调用该then方法：

DataElements.get({'page': pageNumber}).then(function(data) {
   $scope.data = data;
})

或者如果它使用 $resource 通常会返回一个带有$promise属性的对象：

DataElements.get({'page': pageNumber}).$promise.then(function(data) {
   $scope.data = data;
})
于 2014-11-16T12:12:05.340 回答
1

我终于解决了这个问题。

它归结为这个<div ng-controller="ListController">指令。它创建了第二个ListController并将其附加到$rootScope. 绑定没有问题，但从nextPage()不同的范围调用。

在动态 ListController 的初始化阶段，两个控制器都会执行DataElements.get..，这就是它看起来可以工作的原因，但调用ng-click : nextPage()没有在分配给list.html视图的控制器的上下文中运行。

于 2014-11-16T18:29:13.440 回答
0

正如您所提到的，您的数据$scope正在更新，但更改不会传播到视图。有东西打破了双向绑定。

查看您在控制台（F12在 Chrome 中）中遇到的错误类型。

删除此代码块：

//Error: Digest already in progress
DataElements.get({'page': pageNumber }, function(data){ 
    $scope.$apply(function(){
      $scope.data = data; 
    });
});

//View doesnt update
$scope.data = DataElements.get({'page': pageNumber)};

避免$apply显式使用，这不是一个好主意。

编辑：

ListController尽管 OP 通过删除绑定来避免混淆来解决他的问题$scope，但 HTML 代码现在看起来有点奇怪。最佳解决方案是创建一个绑定到 的指令，ListController然后在视图中重用该指令。这样，OP 将$scope在未来避免此类问题。

于 2014-11-16T13:14:03.530 回答