Rob M
Rob M

Reputation: 1031

Promise return not updating scope

I created a service to update a list. The call to do the insert is working fine, but when the data comes back and I try to update the list, I am getting the error undefined is not a function. That doesn't really tell me where the issue is, and I'm stumped.

Here is the call in the controller

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

and here is the service:

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;
}

I'm guessing that the issue is at the .then, but i'm not totally sure. Any suggestions?

Adding View:

<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>

Upvotes: 1

Views: 82

Answers (2)

JakeRadakovich
JakeRadakovich

Reputation: 75

The following should work. $http.post is returning a promise, but instead of a then, it has a success. That's tripped me up before. If you return that promise, your code in the controller should work correctly.

   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;
            });
    }

Upvotes: 1

mpm
mpm

Reputation: 20155

first you dont even need $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);
}

second you might need to use $scope.$apply , or not.

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

Upvotes: 0

Related Questions