在Angularjs中共享嵌套指令和控制器之间的范围

时间:2015-04-01 16:59:56

标签: angularjs angularjs-scope

我在我的角度应用程序中创建了一个控制器和指令,定义如下:

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

虽然结构如下:

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

    </crud>
</div>

这里是crud模板:

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

当我启动应用程序时,休息调用正确执行并且数据按预期显示(rowCollection显示正确的数据),但是当我单击调用pageChanged()函数的分页按钮时,控制器没有$ scope.repository属性组。似乎正在发生的事情是控制器没有绑定/链接到指令中定义的范围。

我还尝试在指令中的链接函数的末尾添加范围。$ apply()但在这种情况下我得到错误: &#34;错误:[$ rootScope:inprog] $ digest已在进行中&#34;。

1 个答案:

答案 0 :(得分:0)

我没有读太多但你的第一行app.controller('CrudCtrl', ['$scope', 'schemaForm', '$http', function($scope, $http)错误应该是app.controller('CrudCtrl', ['$scope', 'schemaForm', '$http', function($scope, schemaForm, $http)

相关问题