Question

我创建了一个更新列表的服务。执行插入的调用工作正常，但是当数据返回并且我尝试更新列表时，我收到错误undefined is not a function。这并没有真正告诉我问题出在哪里，而且我很难过。

这是控制器中的呼叫

$scope.createCategory = function (newCategory) {
    CategoryService.createCategory(newCategory)
        .then(function(category){
            $scope.categoryNames.push({
                asset_category_id: category.id , asset_type: category.name}
            );
         });
};

这是服务：

createCategory: function(name){
    var params = 'categoryName' + '=' + name.categoryName + '&';
    var defObj = $q.defer();
    params += 'method' + '=' + 'createCategory';

    $http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

    $http.post('cfc/category.cfc', params);
    $http.success(function(data){
        defObj.resolve(data);
    });
    return defObj.promise;
}

我猜这个问题出在.then，但我并不完全确定。有什么建议吗？

添加视图：

<div class="panel">
    <div class="col-xs-6">
    <table class="table">
        <thead>
        <tr>
            <th>#</th>
            <th>Category Name</th>
            <th>Edit</th>
            <th>Delete</th>
        </tr>
        </thead>
        <tbody>
        <tr data-ng-repeat="category in categoryNames">
            <td>{{$index + 1}}</td>
            <td>{{category.asset_type}}</td>
            <td>
                <span class="glyphicon glyphicon-wrench" data-ng-click="editCategory($index)"></span>
            </td>
            <td>
                <span class="glyphicon glyphicon-remove" data-ng-click="removeCategory($index)"></span>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<div class="col-xs-6">
    <div class="well">
        <div class="h4">Create Category</div>
        <div class="well">
            <form role="role" data-ng-submit="createCategory(newCategory)">
                <div class="form-group">
                    <label for="categoryName">Category Name</label>
                    <input type="text" class="form-control" id="categoryName" name="categoryName" placeholder="Category Name" data-ng-model="newCategory.categoryName"/>

                </div>
                <button type="submit" class="btn btn-primary btn-block">Add</button>
            </form>
        </div>
    </div>
</div>

Answer 1

以下内容应该有效。 $http.post正在返回一个承诺，但它不是then，而是success。那之前我绊倒了。如果您返回该承诺，则控制器中的代码应该可以正常工作。

   createCategory: function(name){
        var params = 'categoryName' + '=' + name.categoryName + '&';
        params += 'method' + '=' + 'createCategory';

        $http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

        return $http.post('cfc/category.cfc', params)
            .success(function(data){
                return data;
            });
    }

Answer 2

首先你甚至不需要$ q

createCategory: function(name){
    var params = 'categoryName' + '=' + name.categoryName + '&';
    params += 'method' + '=' + 'createCategory';

    $http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

    return $http.post('cfc/category.cfc', params);
}

第二，您可能需要使用$ scope。$ apply或不。

.then(function(category){
    $scope.categoryNames = category;
    $scope.$apply('categoryNames');
});

承诺返回不更新范围

2 个答案: