Sharing scope between nested directives and controllers in Angularjs -
i have created controller , directive in angular application defined 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 structure 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 launch application rest call executed correctly , data shown expected (rowcollection shows correct data), when click on pagination button calls pagechanged() function, controller has not $scope.repository property set. seems happening controller not binded/linked scope defined in directive.
i tried add scope.$apply() @ end od link function in directive error in case: "error: [$rootscope:inprog] $digest in progress".
i have not read there mistake in first line app.controller('crudctrl', ['$scope', 'schemaform', '$http', function($scope, $http)
should app.controller('crudctrl', ['$scope', 'schemaform', '$http', function($scope, schemaform, $http)
Comments
Post a Comment