Question

收到文件后说$scope.var = $resource.get(/*one record*/) ..我需要阅读收到的嵌套对象结构（现在在$ scope.var中），以便显示每个字段。

我无法访问$scope.var中存在的键值对。所以我找到了使用$scope.var.$promise.then(callback)执行此操作的方法，但$ scope.var的格式已更改。

例如：

before parsing:
When I console to see what is in $scope.var, it shows as - 
Resource: {$Promise: Promise, $resolved: false}
/*key-value pairs of the object*/

after parsing using $promise.then:
Here the console says
Object {_id: "...", ...}
/*key-value pairs of the object*/

由于上述格式差异，我在使用$ resource尝试$ update时遇到了问题。其中说$update is not a function。

除了使用$ promise.then之外，还有其他方法可以从$ resource.get访问键值对吗？

编辑：这是我的原始代码：

Contact.service.js

  'use strict';

angular.module('contacts').factory('Contact', ['$resource', function($resource) {
    console.log('Iam cliked');
    return $resource('/api/contacts/:id', {id: '@_id'}, {
        update: {
            method: 'PUT'
        }
    });
}]);

EditController.js

  'use strict';

angular.module('contacts').controller('EditController', ['$scope', '$stateParams' ,'$location', '$rootScope', 'Contact',
    function($scope, $stateParams, $location, $rootScope, Contact) {
        $rootScope.PAGE = 'edit';
        $scope.contact = {};
        $scope.singleContact = Contact.get({ id: $stateParams.id});

        console.log($scope.singleContact);


        $scope.singleContact.$promise.then(function(data){
            angular.forEach(data, function(value, key) {
                if(key !== 'additions')
                    $scope.contact[key] = value;
                else {
                    angular.forEach(data.additions, function(value, key) {
                        $scope.contact[key] = value;
                    });
                }
            });
            console.log($scope.contact);
        });

        /*parsing my received nested json doument to have all straight key-value pairs and binding this $scope.contact to form-field directive 'record=contact'

I am successful doing this and able to display in web page but when I try to $update any of the field in the webpage it doesnt update. Because it is not being Resource object but it is just the object
please see the images attached[![enter image description here][1]][1]*/




        $scope.delete = function(){
            $scope.contact.$delete();
            $location.url('/contacts');
        };
    }
]);

Edit.html

<section data-ng-controller='EditController'>
<h2>{{contact.firstName}} {{contact.lastName}}</h2>

<form name='editContact' class='form-horizontal'>
    <form-field record='contact' recordType='contactType' field='firstName' required='true'></form-field>
    <form-field record='contact' recordType='contactType' field='lastName' required='true'></form-field>
    <form-field record='contact' recordType='contactType' field='{{k}}' ng-repeat=' (k, v) in contact | contactDisplayFilter: "firstName" | contactDisplayFilter: "lastName" | contactDisplayFilter: "__v" | contactDisplayFilter: "_id" | contactDisplayFilter: "userName"'></form-field>

    <new-field record='contact'></new-field>

    <div class='row form-group'>
        <div class='col-sm-offset-2'>
            <button class='btn btn-danger' ng-click='delete()'>Delete Contact</button>
        </div>
    </div>
</form>

形状field.html

<div class='row form-group' ng-form='{{field}}' ng-class="{'has-error': {{field}}.$dirty && {{field}}.$invalid}">
<label  class='col-sm-2 control-label'>{{field | labelCase}} <span ng-if='required'>*</span></label>

<div class='col-sm-6' ng-switch='required'>
    <input ng-switch-when='true' ng-model='record[field]' type='{{recordType[field]}}' class='form-control' required ng-change='update()' ng-blur='blurUpdate()' />

    <div class='input-group' ng-switch-default>
        <input ng-model='record[field]' type='{{recordType[field]}}' class='form-control' ng-change='update()' ng-blur='blurUpdate()' />
        <span class='input-group-btn'>
            <button class='btn btn-default' ng-click='remove(field)'>
                <span class='glyphicon glyphicon-remove-circle'></span>
            </button>
        </span>
    </div>
</div>

<div class='col-sm-4 has-error' ng-show='{{field}}.$dirty && {{field}}.$invalid' ng-messages='{{field}}.$error'>
    <p class='control-label' ng-message='required'>{{field | labelCase}} is required.</p>
    <p class='control-label' ng-repeat='(k, v) in types' ng-message='{{k}}'>{{field | labelCase}} {{v[1]}}</p>
</div>

form-field.js指令中的函数

                $scope.blurUpdate = function(){
                if($scope.live!== 'false'){
                    console.log($scope.record);
                    $scope.record.$update(function(updatedRecord){
                        $scope.record = updatedRecord;
                    });
                }
            };

所以在上面的$ update中给出了错误。说不是功能。

我希望在$ scope.singleContact和$ scope.contact中使用相同的格式。我怎样才能做到这一点？

Answer 1

我不知道我是否理解，但你想要这样的事情：

Contact.get({id: $stateParams.id}, function (contact){
    $scope.var = contact;
});

正确？

它将返回te promise，您将能够在加载模板之前使用数据

Answer 2

好的，有几件事：

Promise不会同步返回值

您必须使用then函数调用。这条线

$scope.singleContact = Contact.get({ id: $stateParams.id});

不会立即将您的数据放入$scope.singleContact变量，因为该行返回Promise并转到下一行而不等待Web请求返回。这就是Promise的工作方式。如果您不熟悉它们，那么阅读它们可能并不是一个坏主意。这样做的结果是，在$scope.singleContact中需要工作值的控制器（或者此代码所在的任何地方）中的所有需要位于then块内或某些块中保证在承诺解决后运行的方式。

所以我认为你想要（如@EDDIE VALVERDE所说）：

Contact.get({ id: $stateParams.id}, function(data) { $scope.singleContact = data; $scope.contact = data; });

我不确定代码的其余部分是做什么的，但我认为它正在尝试对$scope.singleContact进行深层复制。我的猜测是，你只是这样做，因为承诺的东西不起作用，你可以删除它...... 如果我错过了什么，请告诉我。

Answer 3

啊，现在我觉得我明白了。好的，对于1我不会将$ resource对象添加到您的范围。 IMO的范围旨在成为 MVC 范例中的模型。 $资源有点像模型，但它正在执行网络调用，除了数据之外还有很多东西。如果在模型中放入$ resource，则删除任何可以操作的透明层，并在数据从服务器返回时转换数据。而且我确定还有其他原因。所以我不会直接向范围添加像Contact这样的资源对象。话虽这么说，我想你想添加一个新的更新功能，就像你用删除一样，只有这样的东西：

    $scope.update= function(args){

        //make network call and update contact
        Contact.$update({/*data from args?*/});

        //get the data i just saved
        Contact.$get({/* id from args */}, function(result) {
            $scope.contact = result;
        });

        //other stuff?
    };

这是我的第一个想法，无论如何......

除了执行$ promise.then

3 个答案: