自定义指令错误中的ng-table"无法设置属性' $ data' of null"

时间:2015-10-15 17:54:46

标签: javascript html angularjs angularjs-directive angularjs-bindings

这里是我的问题:

我正在尝试在angular中构建一个指令,它将使用ng-table内部。 问题是输入参数tableData最初初始化为空数组,因为当用户单击按钮时,它是从指令外部设置的。

所以我在tableData上添加了一只手表,并在tableData更改时尝试重新加载表格。

但不同的.resolve函数最终会出现以下异常。

请帮忙

指令用法

<table-multiselect table-data="objectArray"></table-multiselect>

这是我的临时

TableMultiselect.tmpl.cshtml

<table ng-table="multiselect" class="table">
     <tr ng-repeat="feature in $data">
            <td data-title="'Id'" sortable="'id'">{{feature .id}}</td>
            <td data-title="'Name'" sortable="'name'">{{feature .name}}</td>
            <td data-title="'Type'" sortable="'type'">{{feature .type}}</td>
    </tr>
</table>

控制器

.directive('TableMultiselect', function (ngTableParams) {
    return {
        restrict: 'E',
        templateUrl: 'TableMultiselect.tmpl.cshtml',
        scope: {
            tableData: '='
        },
        controller: function ($scope) {

            var buildMultiSelectTable = function () {
                return new ngTableParams({
                    page: 1,
                    count: 10,
                    sorting: {
                        id: 'asc'
                    },
                    filter: {},

                }, {
                    counts: [10],
                    total: $scope.tableData.length, // length of data
                    getData: function ($defer, params) {
                        var data = $scope.tableData;
                        if (data.length <= 10) {
                            params.settings({ 'counts': [] });
                        }
                        params.total(data.length);
                        $defer.resolve(data);
                    }
                });
            };

            $scope.multiselect = buildMultiSelectTable();

            $scope.$watch('tableData', function (newValue, oldValue) {
                if ($scope.tableData != undefined && $scope.tableData.length > 0) {
                   $scope.multiselect.reload();
                }
            });
        },


    };
});

错误

TypeError: Cannot set property '$data' of null
    at angular?v=M5FbIdPbFPNnbg6slbXZa4DR7EKc6tL5nLLGAVGYAa41:3095
    at l.promise.then.J (angular?v=M5FbIdPbFPNnbg6slbXZa4DR7EKc6tL5nLLGAVGYAa41:101)
    at angular?v=M5FbIdPbFPNnbg6slbXZa4DR7EKc6tL5nLLGAVGYAa41:102
    at h.a.$get.h.$eval (angular?v=M5FbIdPbFPNnbg6slbXZa4DR7EKc6tL5nLLGAVGYAa41:113)
    at h.a.$get.h.$digest (angular?v=M5FbIdPbFPNnbg6slbXZa4DR7EKc6tL5nLLGAVGYAa41:110)
    at h.a.$get.h.$apply (angular?v=M5FbIdPbFPNnbg6slbXZa4DR7EKc6tL5nLLGAVGYAa41:113)
    at m (angular?v=M5FbIdPbFPNnbg6slbXZa4DR7EKc6tL5nLLGAVGYAa41:72)
    at w (angular?v=M5FbIdPbFPNnbg6slbXZa4DR7EKc6tL5nLLGAVGYAa41:77)
    at XMLHttpRequest.B.onreadystatechange (angular?v=M5FbIdPbFPNnbg6slbXZa4DR7EKc6tL5nLLGAVGYAa41:79)

1 个答案:

答案 0 :(得分:-1)

从您粘贴的代码中可以明显看出的一个问题是指令名称应该是'tableMultiSelect'而不是'TableMultiSelect'

@WebService(name = "WS_XXXXXX", portName = "WS_XXXXXSoap12HttpPort")
@BindingType(SOAPBinding.SOAP12HTTP_BINDING)
public class WS_GetPlanUsage {

@WebMethod(operationName = "xxxxxx")
@javax.jws.soap.SOAPBinding(parameterStyle =    javax.jws.soap.SOAPBinding.ParameterStyle.WRAPPED)
public GetPlanUsageMapBean getPlanUsage(@WebParam(name = "phoneNumber",   partName = "request") String phoneNumber,
@WebParam(name = "initialDate", partName = "request") String initialDate, 
@WebParam(name = "finalDate", partName = "request") String finalDate) {

BReturn oBReturn = null;
GetPlanUsageResponse response = new GetPlanUsageResponse();
GetPlanUsageRequest rq = new GetPlanUsageRequest();

rq.setPhoneNumber(phoneNumber);
rq.setInitialDate(initialDate);
rq.setFinalDate(finalDate);

oBReturn = new GetPlanUsageBL().getPlanUsage(rq);

GetPlanUsageMapBean getPlanUsage =   (GetPlanUsageMapBean)oBReturn.getObject();

return getPlanUsage;
}

在查看完整代码时,可能还有其他难以猜测的问题,所以这是基于我从您的问题中理解的工作实现:http://plnkr.co/edit/7MHhl6AKdfzajprfc0xK?p=preview

这就是你的对象数组在运行时的变化。

app.directive('tableMultiselect', function (ngTableParams) {