Question

我今天开始使用Restangular和Node，在我的角度视图中尝试将新用户添加到用户列表时遇到了问题。

view.html

<input type="text" ng-model="app.user.name" />
<input type="button" ng-click="app.addUser( app.user )" />

<ul>
    <li ng-repeat="user in app.users">
        <strong>{{ user.name }}</strong>    
        <input type="button" ng-click="app.removeUser( user )" />           
    </li>
</ul>

app.js

var baseUsers = Restangular.all( 'users' );

app.getUsers = function()
{
    baseUsers.getList().then( function( res ) 
    {
        app.users = res;
    });     
};
app.getUsers();

app.addUser = function( newUser )
{               
    baseUsers.post( newUser ).then( function( res ) 
    {
        if( res.success == true )
        {  
            // add new user to scope array
            app.users.push( res.data ); // res.data contains the newly created user
        }       
    }); 
}

app.removeUser = function( oldUser )
{       
    //...
}

以上的工作都很好，除了一个微小但令人讨厌的问题。

如果我添加新用户，则会将用户名添加到视图中的列表中。但是，当我单击此用户旁边的删除按钮时，我收到此错误：TypeError: Object #<Object> has no method 'remove' at app.removeUser。我的猜测是，当我按照我的方式将新创建的用户添加到作用域数组时，它不知道它是否是一个Restangular对象。所以我认为问题在于app.users.push( res.data );

如何解决此问题？

PS：当我刷新页面时，删除功能有效。因为它会通过app.getUsers再次自动获取所有项目，而不是通过push手动添加一项。

Answer 1

正如你所说的那样。您推入阵列的新用户根本没有进行重新组合＆＃34;。看看Restangular中的restangularizeElement函数，并在将新用户推入用户数组之前对其进行初始化。

类似的东西：

if( res.success == true )
{  
    // add new user to scope array
    app.users.push(
      Restangular.restangularizeElement('', res.data, 'users')
    );
}

空字符串意味着用户没有父资源。

Answer 2

在rails应用中遇到类似的问题。我没有看到你的删除功能，所以我假设。但基本上Angular不知道新添加的用户的ID是什么，因此您需要在创建用户时从api响应中获取该ID。就我而言，这是一个联系人。

我的新联系范围

$scope.addContact = function () {

    // Use the 'then' method to pass the response 'addedContact' back to you
    Restangular.all('contacts').customPOST($scope.newContact).then(function(addedContact){
        // THIS IS WHERE YOU SET THE ID
        $scope.newContact.id = addedContact.id; 
        // Now it will push the new ID too
        $scope.contacts.push($scope.newContact);

    });
};

所以你可能看起来像这样

app.addUser = function( newUser )
{               
    baseUsers.post( newUser ).then( function( res ) 
    {
        if( res.success == true ) // BTW you might not need this 1st 'then' function is success
        {  
            // Get the ID from the res
            newUser.id = res.data.id // assuming that this will set the ID

            // add new user to scope array
            app.users.push( newUser ); // res.data contains the newly created user
        }       
    }); 
}

对象并不知道它是一个重新对象

2 个答案: