绑定动态加载复选框Angular.js模型 [英] Bind dynamically loaded checkbox to Angular.js model

问题描述

我使用Angular.js和数据表加载数据的大名单​​。这是利用服务器侧处理，所以在页面加载，然后将DataTable载荷。

I am using Angular.js and DataTables to load a big list of data. This is using server side processing, so the page is loaded, and then the DataTable loads.

我的表有复选框的两列，我试图绑定到一个角根范围变量。这里是code其中设置我rootscope变量的占位符。

My table has two columns of checkboxes that I am trying to bind to an angular root scope variable. Here is the code where I set my rootscope variable as a placeholder.

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

以下功能由我的控制器称为检索保存的数据和理由的变量保存在report.disavow（复选框数据保存）对象。

The following function is called by my controller to retrieve the saved data and to save the reason variable in the report.disavow (checkbox data to save) object.

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对象的复选框的例子。

This is an example of the checkbox that I would like to bind to the report.disavow object.

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

这code完美的作品，如果我贴标签复选框（上图）到partial.html。如果我回到这一点，并把它的数据表它不会做任何事情。

This code works perfectly if I paste the checkbox tag (above) into the partial.html. If I return this and put it in the datatable it doesn't do anything.

我相信，我需要告诉角度再次检查页面并绑定到任何对象。我期待通过文档，但还没有找到我要找的。任何人都可以点我在正确的方向？请和谢谢你。

I believe that I need to tell Angular to check the page again and bind to any objects. I'm looking through the docs but haven't found what I'm looking for. Can anyone point me in the right direction? Please and thank you.

推荐答案

好吧，我已经找到我的答案。我所有的上述code的复选框的是正确的。

All right I have found my answer. All of my above code for the checkbox's is correct.

问题是，角度不自动绑定指令和模式，以HTML添加到页面加载后的DOM元素，它的DataTable一样。

The issue was that Angular doesn't automatically bind directives and models to html added to the dom element after page load, which DataTables does.

该解决方案是使用$编译解析HTML和fnLink它宾得到$范围。请注意，我使用$ rootScope维持在多个页面的列表。在大多数情况下，你可能会想$范围。

The solution was to use $compile to parse the html and fnLink to binde it to the $scope. Please note that I am using $rootScope to maintain a list across multiple pages. In most cases you would probably want $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
    }
}

这是我的控制器。

And here's my 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;
});

下面有一些链接文档：

Heres some links to docs:

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

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

这篇关于绑定动态加载复选框Angular.js模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！