Question

在base.js中定义了一个自定义ui-grid

app.directive('stkGrid', ['$window', '$timeout', function($window, $timeout) {
    return {
        restrict: 'E',
        transclude: true,       
        scope: {
            data: '=',
            autoHeight: '=',
            selectionVariable: '=',
            onRowSelect: '&',
            onRowDeselect: '&',
            onRowsChanged: '&',
            selectAll: '@',
            canSelect: '@',
            columnDefs: '=',
            multiSelect: '@',
            noUnselect: '@'
        },
        controllerAs: 'parentCtrl',
        controller: ['$scope', '$element', function($scope, $element) {
            var $attrs = $element[0].attributes;

            $scope.$watch('selectionVariable', function(newValue, oldValue) {
                if (!newValue || !newValue.length) {
                    //$scope.gridApi.selection.clearSelectedRows();
                }
            });

            function rowSelectionChanged(row) {
                // row selection logic
            };

            $scope.stkGridOptions = {
                data: 'data',
                enableRowSelection: ($scope.canSelect != 'false'),
                enableSelectAll: ($scope.selectAll == 'true'),
                multiSelect: ($scope.multiSelect == 'true'),
                noUnselect: (typeof $scope.noUnselect !== 'undefined'),
                enableFullRowSelection: true,
                selectionRowHeaderWidth: 0,
                rowHeight:25,
                onRegisterApi: function(gridApi) {
                    $scope.gridApi=gridApi;
                    if ($scope.autoHeight) {
                        //var height=$window.innerHeight+$scope.autoHeight+'px';
                        var height=$scope.autoHeight+'px';
                        $element.css('height',height);
                        angular.element($element.children()[0]).css('height',height);
                        $timeout(function() {$scope.gridApi.core.handleWindowResize();});
                    }
                    $timeout(function() {gridApi.core.handleWindowResize();});
                    if (rowSelectionChanged) {
                        gridApi.selection.on.rowSelectionChanged($scope, rowSelectionChanged);
                        gridApi.selection.on.rowSelectionChangedBatch($scope, rowSelectionChanged);
                    }
                },
                columnDefs: (!!$scope.columnDefs ? $scope.columnDefs : [])
            };

            this.addColumn=function(col) {
                if (!!$scope.columnDefs) {
                    return;
                }

                $scope.stkGridOptions.columnDefs.push(col);
            };

            $scope.$watchCollection("columnDefs", function(newColumnDefs) {
                if (!newColumnDefs) {
                    return;
                }

                $scope.stkGridOptions.columnDefs = newColumnDefs;
            });
        }],
        link: function($scope, $element, $attrs) {
            if ($scope.autoHeight) {
                angular.element($window).bind('resize', function () {
                    //var height=$window.innerHeight+$scope.autoHeight+'px';
                    var height=$scope.autoHeight+'px';
                    $element.css('height',height);
                    angular.element($element.children()[0]).css('height',height);
                    $timeout(function() {$scope.gridApi.core.handleWindowResize();});
                });
            }
        },
        template: '<div ui-grid="stkGridOptions" ui-grid-selection></div><div ng-transclude></div>'
    };
}]).directive('stkCol', function() {
    return {
        require: '^^stkGrid',
        restrict: 'E',
        transclude: false,
        scope: {
            field: '@',
            displayName: '@',
            width: '@',
            maxWidth: '@',
            minWidth: '@',
            cellFilter: '@',
            cellClass: '@',
            cellTemplate: '=',
            type: '@',
            formatter: '&'
        },
        link: function(scope, element, attrs, stkGridCtrl) {
            stkGridCtrl.addColumn(scope);
        }
    };
});

，此自定义网格在home.html中定义为

<stk-grid id="homeDocumentGrid" data="homeCtrl.documents" auto-height="180" selection-variable="homeCtrl.selectedDocument" ng-dblclick="homeCtrl.viewDocument(homeCtrl.selectedDocument)">
    <stk-col display-name="Include" field="include" cell-template="homeCtrl.documentFieldTemplates['include']" width="128"></stk-col>
    <stk-col display-name="Filename" field="fileName" cell-template="homeCtrl.documentFieldTemplates['fileName']"></stk-col>
    <stk-col display-name="Document Type" field="typeAbbreviation" cell-template="homeCtrl.documentFieldTemplates['typeAbbreviation']"></stk-col>
    <stk-col display-name="Amount" field="amount" cell-template="homeCtrl.documentFieldTemplates['amount']" width="120"></stk-col>
</stk-grid>

和文档字段模板已在home.js中声明

vm.documentFieldTemplates = {
        'include': '<input type="checkbox" ng-model="row.entity.include" />',
        'fileName': '<span ng-class="{inactive: !row.entity.include}">{{row.entity.fileName}}</span>',
        'typeAbbreviation': '<select class="form-control" ng-options="docType.DOCUMENT_TYPE_ABBREVIATION as docType.DOCUMENT_TYPE_ABBREVIATION for docType in grid.appScope.$parent.batchCtrl.docTypes" ng-model="row.entity.typeAbbreviation" ng-disabled="!row.entity.include" ng-change="changeDocType()"><option value="">&lt;Select Document Type&gt;</option></select>',
        'amount': '<input type="text" ng-model="row.entity.amount" ng-disabled="true"/>'
    };

在“文档类型”列上，我添加了changeDocumentType（）方法来捕获更改的文档类型，如下所示：

$scope.changeDocType = function(){
        alert("Document Type Changed!");
    }

任何关于为什么控制器中的ng-change无法正常工作或如何添加更改功能的想法都会很有帮助。

Answer 1

ng-change =“ changeDocType（）”将在stkGrid指令（隔离范围）中查找该方法，而不是home.js中的范围。

ng-change="grid.appScope.changeDocType()"

docs：http://ui-grid.info/docs/#!/tutorial/Tutorial:%20305%20Accessing%20Scope%20in%20templates

ng-change不适用于自定义ui-grid

1 个答案: