javascript - 将动态加载的复选框绑定(bind)到 Angular.js 模型

Question

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

我的表有两列复选框，我试图将它们绑定(bind)到 Angular 根范围变量。这是我将 rootscope 变量设置为占位符的代码。

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

我的 Controller 调用以下函数来检索保存的数据并将原因变量保存在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);
});

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

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

如果我将复选框标记(上面)粘贴到partial.html 中，此代码将完美运行。如果我返回它并将其放入数据表中，它不会执行任何操作。

我相信我需要告诉 Angular 再次检查页面并绑定(bind)到任何对象。我正在查看文档，但没有找到我要找的东西。有人能指出我正确的方向吗？请并谢谢您。

Answer 1

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

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

解决方案是使用 $compile 解析 html 并使用 fnLink 将其绑定(bind)到 $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
    }
}

这是我的 Controller 。

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