將動態加載的復選框綁定到Angular.js模型

Question

我正在使用Angular.js和DataTables來加載大量數據。 這是使用服務器端處理，因此加載頁面，然后加載DataTable。

我的表有兩列復選框，我試圖綁定到一個角度根范圍變量。 這是我將rootscope變量設置為占位符的代碼。

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

我的控制器調用以下函數來檢索保存的數據並將原因變量保存在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