Question

我正在使用Angular.js和DataTables来加载大量数据。这是使用服务器端处理，因此加载页面，然后加载DataTable。

我的表有两列复选框，我试图绑定到一个角度根范围变量。这是我将rootscope变量设置为占位符的代码。

ultModule.run(function($rootScope) {
    $rootScope.report = {
        disavow: { domains: [], urls: [] }
    };
});

我的控制器调用以下函数来检索保存的数据并将reason变量保存在report.disavow（要保存的复选框数据）对象中。

function setSelectionData($rootScope, $http) {
    /* Checkbox Initial Data */
    $http({
        method: 'POST', 
        url: '../ajax-targets/get-report-selected.php',
        data : { 'id': $rootScope.report.id }
    }).success(function(data, status, headers, config) {
        if(data.error) { alert(data.msg); }
        $rootScope.report.disavow = data;
    }).error(function(data, status, headers, config) {
        alert('There was an error starting the process. Please try again later.');
    });

    /* Checkbox Handeling */
    $rootScope.toggelSelected = function(type, id, reason) {
        if(type === 'domain') {
            $rootScope.disavow.domains[id].reason = reason;
        } else {
            $rootScope.disavow.urls[id].reason = reason;
        }
        var a = $rootScope.disavow;
    }
}

ultController.controller('CtrlReportStats', function($rootScope, $scope, $routeParams, $http) {
    setRootScopeParams($rootScope, $http, $routeParams.reportSha);
});

这是我要绑定到report.disavow对象的复选框的示例。

<input type="checkbox" data-ng-model="report.disavow.domains[20378].checked" data-ng-change="toggelSelected('20378', 'url', 'bad-link')">

如果我将checkbox标签（上方）粘贴到partial.html中，则此代码可以正常运行。如果我将其返回并将其放入数据表中则不会执行任何操作。

我相信我需要告诉Angular再次检查页面并绑定到任何对象。我正在查看文档，但没有找到我正在寻找的东西。谁能指出我正确的方向？拜托，谢谢你。

Answer 1

好吧我找到了答案。我在复选框上面的所有代码都是正确的。

问题在于Angular不会自动将指令和模型绑定到页面加载后添加到dom元素的html，这是DataTables所做的。

解决方案是使用$ compile来解析html和fnLink以将其绑定到$ scope。请注意，我使用$ rootScope来维护多个页面的列表。在大多数情况下，您可能需要$ scope。

function setupForAngular($rootScope, $compile) {
    return function(element) {
        var fnLink = $compile(element);     // returns a Link function used to bind template to the scope
        fnLink($rootScope);                 // Bind Scope to the template
    }
}

这是我的控制器。

app.controller('CtrlChecks', function($rootScope, $scope, $compile) {
    var activateInAngular = setupForAngular($rootScope, $compile);

    $scope.options = {
        sDom: '<"top"lif>rt<"bottom"lip><"clearfix">',
        aaSorting: [[ 3, "desc" ]],
        aLengthMenu: [[100, 250, 500, 1000, 1500, 2000, 2500, -1], [100, 250, 500, 1000, 1500, 2000, 2500, "All"]],
        iDisplayLength: 100,
        sPaginationType: "full_numbers",
        bSort: true,
        bAutoWidth: false,
        oLanguage: { "sEmptyTable": 'No patterns found' },
        bProcessing: true,
        bServerSide: true
    };
    $scope.options.sAjaxSource = '../ajax-targets/get-domains.php';
    $scope.options.fnRowCallback = function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
        $(nRow).attr('id', aData['id']);
        setupDetailClickEvent(nRow, activateInAngular);
    }
    $scope.options.fnInitComplete = function(oSettings, json) {
        activateInAngular(this);
    }
    $scope.options = buildDataTable(activateInAngular);
    $scope.options.fnServerParams = function(aoData) {
        aoData.push({"name": "type", "value": "dead"}, {"name": "id_sha", "value": $rootScope.report.sha});
    };
    $scope.options.aoColumns = [
        {"mDataProp": "index", "sClass": "index"},
        {"mDataProp": "check-box-domain", "sClass": "check-box"},
        {"mDataProp": "check-box-url", "sClass": "check-box"},
        {"mDataProp": "pageLink", "sClass": "pageLink"},
        {"mDataProp": "reason_text", "sClass": "reason"}
    ];
    $scope.options.aoColumnDefs = [{"bSortable": false, "aTargets": [0, 1, 2]}];
    $scope.counter = 0;
});

以下是文档的一些链接：

http://docs.angularjs.org/api/ng.$compile

将动态加载的复选框绑定到Angular.js模型

1 个答案: