标签: angular-resource

在Backbone.js,可以使用预先存在的JSON数据来实例化模型

var user = new Backbone.Model({ name: "John Doe", age: 30 });

然后通过一次调用执行更新

user.save({ age: 31 }, { success: successCallback, error: errorCallback });

这在各种场景中都很方便,例如当客户端通过缓存或预先填充的模板(例如<%= raw @user.to_json %>在rails erb模板中使用)可以获得该数据时.

我很好奇,想知道使用时,如何做到这一点$resource用Angular.js.现在,我有一种情况,我的数据在$resource创建之前缓存在客户端上,并且我想更新它而不需要额外GET调用来填充对象:

app.factory('User', ['$resource', function($resource) {
    return $resource('/users/:user_id.json', { user_id: '@id' }, {
        get: { method: 'GET' },
        save: { method: 'PUT' },
        create: { method: 'POST' },
        destroy: { method: 'DELETE' }
    });
}]);

在我的控制器中的某个地方,我只想更新现有用户而不从服务器获取它:

app.controller('UsersController', ['User', function(User) {
    // …

我创建了一个显示数据的指令.我可以将它包含在ng-repeat中,并看到模型已连接.当我单击并返回页面时,数据将再次显示以前进行的更改.我使用ngResources从API加载数据.到目前为止,这么好:它按预期工作.

这是破坏的部分:如果我在我的指令中将数据保存到API,则该项目将从页面中消失(更具体地说,它的字段为空白).其余的项目仍然像以前一样.只有保存的更改.

这是指令:

.directive('action', function() {
    return {
        restrict: 'E',
        scope: {
            data:'=model'
        },
        templateUrl: 'modules/actions/view.tpl.html',
        replace: true,
        link: function(scope, element, attr) {
            scope.save = function() {
                console.log(" data to save:" + JSON.stringify(scope.data));
                scope.data.$save();
            }
        }
    };
})

与该指令关联的html包括:

<p><input type="text" ng-model="data.assignee" ng-change="save()">

这是指令的使用方式:

<div ng-repeat="item in data">
  <action model="item" />
</div>

这是一个显示其他背景的小提琴.您可以看到基本指令使用一些虚假数据.API调用的代码已注释掉.

同样,当scope.data.$save();线路取消注释时会出现问题.当ng-repeat中显示的项目尝试保存时,它将从显示的项目列表中消失,替换为带有空白字段的项目.当我重新加载整个应用程序时,我看到API保存成功,现在项目正确显示.

我怀疑发生的事情是保存调用对正确的项目进行操作,但不知何故用一个新的空白替换更改的项目,可能是由于原型继承.然后保存会导致更新父作用域,该作用域重新绘制列表并显示新的消隐项.

有人可以澄清发生了什么以及如何解决它？

我在我的前端使用AngularJS v1.2.16.我创建了一个简单的服务:

app.provider('Site', function () {

  var apiServer = 'http://api.example.com';

  this.$get = ['$resource', function ($resource) {
    var site = $resource(apiServer + '/sites/:action:id', {}, {
      query: {
        withCredentials: true
      },
      checkDomain: {
        method: 'POST',
        withCredentials: true,
        params: {
          action: 'checkDomain'
        }
      },
      save: {
        method: 'PUT',
        withCredentials: true
      }
    });

    return site;
  }];
});

当我尝试获取控制器中的网站列表时:

app.controller('SitesCtrl', ['$scope', 'Site', function ($scope, Site) {
   $scope.sites = Site.query();
}]);

Angular不会发送带有请求的cookie,我无法获取网站列表.

但是当我通过jQuery发送相同的请求时:

$.ajax({
  type: 'GET',
  url: 'http://api.example.com/sites',
  xhrFields: {
    withCredentials: true
  },
  success: function (data) …

如何使angularjs $ resource返回从指定域对象派生/原型化的对象数组？

以下是http://plnkr.co/edit/AVLQItPIfoLwsgDzoBdK?p=preview处理一组Notes对象的示例.

app.controller('MainCtrl', function($scope, NoteResource) {
$scope.name = 'World';
$scope.notes  = NoteResource.query();

$scope.spellCheckAllNotes = function() {
  angular.forEach($scope.notes, function(note) {
    note.spellCheck();
   });
 }
});

问题是$ resource返回Resources的数组,而不是Note带有Resource添加到原型的方法的s 数组.

[解决方案应遵循"好"的JavaScript实践]

我在尝试重试功能时遇到了一些麻烦,希望得到一些帮助.我有一个我想要调用的$资源,直到成功条件发生或超过最大重试次数.

我似乎遇到的问题是,在我的重试功能中,我正在调用另一个承诺,这就是检查条件的地方.我可以通过删除添加的承诺并在几次重试后创建默认成功条件来使代码按预期运行,但我无法弄清楚如何正确地将新的promise调用添加到函数中.

resource 是一个Angular $资源的替身,它返回$ promise

我的代码如下:

resource.$promise.then(function (response) {
  return keepTrying(state, 5);
 }).then(function (response) {

 }).catch(function (err) {
   console.log(err);
 });

而keepTrying功能:

function keepTrying(state, maxRetries, deferred) {
  deferred = deferred || $q.defer();
  resource.$promise.then(function (response) {
    success = response;
  });
  if (success) {
    return deferred.resolve(success);
  } else if (maxRetries > 0) {
    setTimeout(function () {
      keepTrying(state, maxRetries - 1, deferred);
     }, 1000);
   } else if (maxRetries === 0) {
     deferred.reject('Maximum retries exceeded');
   }
   return deferred.promise;
 }

我正在使用Angular.JS编写Web应用程序,它使用Express和Socket.IO(Node模块)编写的后端系统.我在Angular.JS写了一个工厂来列出元素:

angular.module('myApp.api', ['ngResource'])
    .factory('Element', function($resource, Socket) {
        return $resource(
            'http://localhost:4000/elements/:id',
            { id : '@id' },
            { 
                update: { method: 'PATCH' }
            }
        );
    });

这个工厂在ElementCtrl中使用并相应地显示元素,它完美地工作:

angular.module('myApp.element', [])
    .controller('ElementCtrl', ['$scope', 'Element', function($scope, Element) {
    var elements = Element.query();
}]);

但是,我还在后端实现了Socket.io,如果元素添加到元素列表中,它会发送一条消息.我想改变Element工厂或者找一些其他方法来为控制器透明地处理它.我的客户端Socket.io代码如下:

angular.module('myApp.socket', [])
    .factory('ElementRealtime', function($resource, Socket) {
        var socket = io.connect('http://localhost:4000');
        return {
            on: function (eventName, callback) {
              socket.on(eventName, function () {  
                var args = arguments;
                $rootScope.$apply(function () {
                  callback.apply(socket, args);
                });
              });
            },
            emit: function (eventName, data, callback) {
              socket.emit(eventName, data, …

我正在开发一个有角度的v1.3应用程序,我在一个我的控制器中使用angular-poller来自动发送请求,每2秒从我的后端获取新数据.

它在Chrome中运行良好,但在IE11中不起作用.但奇怪的是,我使用Fiddler来查看当我使用IE11时是否发出请求,我可以看到在IE 11上,如果打开开发工具窗口,那么请求将被发送,我的应用程序正常工作,但如果我不打开开发控制台,甚至没有提出请求,至少这是小提琴手给我看的.

    poller.get(myResourceService, { action: 'get',
                  argumentsArray: [{
                    id: $stateParams.id
                  }],
                  delay: '2000',
                  smart:true })
  .promise.then(null, null, function(result) {
    $scope.details= result;
  });

以上是我控制器中的代码.这真是个烦人的问题,我花了好几个小时.所以,任何帮助将非常感激.

干杯

尝试从我的AngularJS端向Rails服务器发送数据时遇到问题.

服务器错误:

ActionController::RoutingError (No route matches [OPTIONS] "/users"):
  actionpack (4.1.9) lib/action_dispatch/middleware/debug_exceptions.rb:21:in `call'
  actionpack (4.1.9) lib/action_dispatch/middleware/show_exceptions.rb:30:in `call'
  railties (4.1.9) lib/rails/rack/logger.rb:38:in `call_app'
  railties (4.1.9) lib/rails/rack/logger.rb:20:in `block in call'
  activesupport (4.1.9) lib/active_support/tagged_logging.rb:68:in `block in tagged'
  activesupport (4.1.9) lib/active_support/tagged_logging.rb:26:in `tagged'
  activesupport (4.1.9) lib/active_support/tagged_logging.rb:68:in `tagged'
  railties (4.1.9) lib/rails/rack/logger.rb:20:in `call'
  actionpack (4.1.9) lib/action_dispatch/middleware/request_id.rb:21:in `call'
  rack (1.5.5) lib/rack/methodoverride.rb:21:in `call'
  rack (1.5.5) lib/rack/runtime.rb:17:in `call'
  activesupport (4.1.9) lib/active_support/cache/strategy/local_cache_middleware.rb:26:in `call'
  rack (1.5.5) lib/rack/lock.rb:17:in `call'
  actionpack (4.1.9) lib/action_dispatch/middleware/static.rb:84:in `call'
  rack (1.5.5) lib/rack/sendfile.rb:112:in `call'
  railties (4.1.9) lib/rails/engine.rb:514:in `call'
  railties (4.1.9) lib/rails/application.rb:144:in `call' …

我开始使用angular中的promises来解析我的api调用,使用以下语法:

 $scope.module = moduleFactory.get({id: $stateParams.id})
    .$promise.then(function(response){
        $scope.module = response;
     }

现在,我遇到了一种情况,我必须在for循环中链接多个promise,并在for循环中的所有promise都已解析后执行一些代码.我一直试图用$ promise语法搜索如何做到这一点,但互联网上的大多数消息来源都在谈论$ q.我是开发工作的新手,我发现在这两个概念($ q和$ promise)之间徘徊是非常困惑的.请你好心人:首先,向我解释$ promise和$ q之间的区别; 第二,如果我决定使用$ q来解决我上面描述的当前问题,是否意味着我将不得不重写使用$ promise的代码,以使其可以像$ q.all()那样进行链接？

当我升级时,ng-repeat需要非常长的时间来加载并尝试显示更多内容框而没有$ resource提供的内容.

我已将问题缩小到1.1.0和1.1.1之间的更新.我查看了更改日志,但没有任何东西突然出现在我身上,但它必须在那里.

Changelog => https://github.com/angular/angular.js/blob/master/CHANGELOG.md#111-pathological-kerning-2012-11-26

此应用程序的存储库=> https://github.com/brianpetro/resume

目前我的角度看起来像:

app = angular.module("Resume", ["ngResource"])

app.factory "Entry", ["$resource", ($resource) ->
  $resource("/entries")
]

@EntryCtrl = ["$scope", "Entry", ($scope, Entry) ->
  $scope.entries = Entry.query()
]

使用ng-repeat在多个视图上发生这种情况:

<html ng-app="Resume">
  <div ng-controller="EntryCtrl">
    <ul>
      <li ng-repeat="entry in entries">
        {{entry.title}}
      </li>
    </ul>
  </div>
</html>

这是AngularJS版本1.1.0: 这是AngularJS版本1.1.1: