Sharing scope between nested directives and controllers in Angularjs

Question

I have created a controller and directive in my angular application defined as following:

app.controller('CrudCtrl', ['$scope', '$http', function($scope, $http) {

    $scope.isLoading = true;

    $scope.pageChanged = function(){
        $http({
            method: 'GET',
            url: 'http://localhost:8080/rest/repository'+$scope.repository.path,
            params: {
                size: 3,
                page: $scope.currentPage
            }
        }).
            success(function (data, status){
                $scope.rowCollection = data._embedded['rest-original-product'];
                $scope.totalPages = data.page.totalPages;
                $scope.currentPage = data.page.number + 1;
                $scope.totalElements = data.page.totalElements;
                $scope.pageSize = data.page.size;
                $scope.isLoading = false;
                $scope.numPages = 5;
            }).
            error(function (data, status){
                log.error("Error");
            });
    };


    $scope.$watch('repository', function(newVal, oldVal){
        if(newVal!=null && oldVal!=newVal ){

        }
    });


}]);
app.directive('crud', ['$resource', 'CrudConstant', '$http', function($resource, CrudConstant, $http) {
    return {
        //scope:{},
        link: function(scope, element, attrs) {
            scope.repository = CrudConstant[attrs.repository];

            $http({
                method: 'GET',
                url: 'http://localhost:8080/rest/repository'+scope.repository.path,
                params: {
                    size: 3
                }
            }).
                success(function (data, status){
                    scope.rowCollection = data._embedded['rest-original-product'];
                    scope.totalPages = data.page.totalPages;
                    scope.currentPage = data.page.number + 1;
                    scope.totalElements = data.page.totalElements;
                    scope.pageSize = data.page.size;
                    scope.isLoading = false;
                    scope.numPages = 5;
                }).
                error(function (data, status){
                    log.error("Error");
                });


        },
        templateUrl: 'tpl/app/crud/crud.html'
    };
}]);
app.directive('table', ['$resource', function($resource) {
    return {

        link: function(scope, element, attrs) {

        },
        templateUrl: 'tpl/app/crud/table.html'
    };
}]);

while the structure is the following:

<div ui-view class="fade-in-up" ng-controller="CrudCtrl">
    <crud repository="originalProduct">

    </crud>
</div>

where here goes crud template:

<div class="col-sm-5 m-b-xs">
    <pagination
            total-items="totalElements"
            items-per-page="pageSize"
            ng-change="pageChanged()"
            ng-model="currentPage"
            max-size="5"
            class="pagination-sm m-t-none m-b"
            boundary-links="true"
            rotate="false"
            num-pages="numPages"></pagination>
</div>
<div>{{rowCollection}}</div>

When I launch the application rest call is executed correctly and data are shown as expected (rowCollection shows correct data), but when I click on the pagination button which calls pageChanged() function, the controller has not $scope.repository property set. What seems to be happening is that controller is not binded/linked to the scope defined in the directive.

I also tried to add scope.$apply() at the end od the link function in the directive but I get error in that case: "Error: [$rootScope:inprog] $digest already in progress".

are you using isolated scope? seems like commented for some reason or is there? — Pankaj Parkar
– Pankaj Parkar, Commented Apr 1, 2015 at 17:49

Shaxrillo · Accepted Answer · 2015-04-01 17:06:30Z

0

I have not read too much but there is mistake in your first line app.controller('CrudCtrl', ['$scope', 'schemaForm', '$http', function($scope, $http) should be app.controller('CrudCtrl', ['$scope', 'schemaForm', '$http', function($scope, schemaForm, $http)

answered Apr 1, 2015 at 17:06

Shaxrillo

7691 gold badge7 silver badges24 bronze badges

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

2 Comments

ddelizia Over a year ago

I'm not sure this is the solution of the problem. I modified it and I still get the same error.

ddelizia Over a year ago

Just changed the description in order to dont make confusion as schemaForm dependency is not necessary

Collectives™ on Stack Overflow

Sharing scope between nested directives and controllers in Angularjs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related