Using a $resource-based data model with controller and directives

Question

I have created a "model"* for my Project data like this:

angular.module('myapp').factory("projectModel", function ($resource) {
    return $resource(
        "/api/projects/:id",
        { id: "@id" },
        {
            "update": { method: "PUT" }
        }
    );
});

I don't want the wait-until-everything-has-loaded-before-displaying-anything behavior using resolve in the routing, instead I'm happy to let the UI and data pop up when it's ready.

It would be nice to have the project data on the $scope in my controller, but since projectModel returns a promise, not the data, I need to do something like:

angular.module('myapp').controller('EditorCtrl', function ($scope, projectModel) {

    projectModel.get({}, { 'id': session.projectId },
        function (successResponse) {
            // success callback
            $scope.project = successResponse;
        },
        function (errorResponse) {
            // failure callback
            console.log(errorResponse);
        }
    );

The data will be rendered in a directive, but since the directive's link method executes before $scope.project is set, I have no data to render in time. I could include projectModel as dependency on the directive but that feels dirty.

What's the correct way of making project data accessible to the directive?

*Bonus question: should I view my $resource-derived service as a MVC model, or is that confusing? If yes, what would be the best way of extending the model with helper methods etc?

I guess using $scope.$watch() on $scope.project is the right way to go... — Tom Söderlund
– Tom Söderlund, Commented Feb 13, 2014 at 7:30
...or not even $watch(), if data bindings in my view are correctly set up. #StartingToThinkWithAngularJS — Tom Söderlund
– Tom Söderlund, Commented Feb 13, 2014 at 7:39

rajmohan · Accepted Answer · 2014-02-14 10:28:03Z

1

$scope.$watch('projectList', function (newVal, oldVal) {
                    if (newVal !== oldVal ) {
                    angular.forEach($scope.projectList, function (row) {
                          row.getName = function () {
                            return splitName(row.community_name);
                          };
                       });
                    }
                }, true);

Yes, you are right I had similar issue, you can do this by watch check for change in $scope.project and you can put the code inside it. Check the above example to update ng-grid dynamically when there is value in $scope.projectList

answered Feb 14, 2014 at 10:28

rajmohan

1,6181 gold badge15 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using a $resource-based data model with controller and directives

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related