10

angularjs を使用して Web サイトを構築しており、Web サービスからデータを取得しています。そのデータをデータテーブルに入力し、各行の編集ボタンを作成する必要があります。いくつかの調査の後、私はこれを思いつきました

問題は、テーブル セルに挿入した html をコンパイルする必要があるため、おそらく ng-click が機能しないことです。私はいくつかの方法でそれを試しましたが、残念ながら私はまだAngularに慣れていないので、それを達成する方法を理解していないようです. 私は本当にこれについて助けが必要です。

これは私の指示です：

dialogApp.directive('myTable', function ($compile) {
return {
    restrict: 'E, A, C',
    link: function (scope, element, attrs, controller) {
        var dataTable = element.dataTable(scope.options);

        scope.$watch('options.aaData', handleModelUpdates, true);

        function handleModelUpdates(newData) {
            var data = newData || null;
            if (data) {
                dataTable.fnClearTable();
                dataTable.fnAddData(data);
            }
        }
    },
    scope: {
        options: "="
    }
};});

コントローラー:

dialogApp.controller('DataTableTestController', ['$scope', function($scope){
$scope.coisas = "coisas";
$scope.botaoEdit = function(a){
    console.log(a);
};

$scope.options = {
    "sDom": '<"H"lf>t<"F"ip>',
    "bStateSave": true,
    "bPaginate": false,
    "bLengthChange": false,
    "bFilter": true,
    "bSort": true,
    "bInfo": true,
    "bAutoWidth": false,
    "sPaginationType": "full_numbers",
    aoColumns: [{
        "sTitle": "name"
    }, {
        "sTitle": "price"
    }, {
        "sTitle": "category"
    }, {
        "sTitle": "action"
    }, null],
    "aaSorting": [[ 0, "asc" ]],
    aoColumnDefs: [
        { "bSortable": true, "aTargets": [0] },
        { "bSortable": false, "aTargets": [1,2,3,4] }
    ],
    bJQueryUI: true,
    aaData: []
};

var dbStuff = [
    {
        "name": "Stuff1",
        "price": 10000000.00,
        "description": "Expensive Stuff",
        "wanna":"buy"
    },
    {
        "name": "Stuff2",
        "price": 20000000.00,
        "description": "Oh my...",
        "wanna":"have money"
    }
]

for (var key in dbStuff){
    $scope.options.aaData.push([dbStuff[key].name,
                                dbStuff[key].price,
                                dbStuff[key].description,
                                dbStuff[key].wanna,
                                "<button ng-click=\"botaoEdit("+dbStuff[key].name+")\">test button</button>"
                               ]);
}

$scope.counter = 0; }])

そしてHTML：

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/redmond/jquery-ui.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.8.2/css/jquery.dataTables.css">

<div ng-app="tableExample">
    <div ng-controller="DataTableTestController">   
        {{ coisas }}
        <table my-table options="options" class="jquery-datatables"></table>
    </div>
</div>
4

1 に答える 1

22

はい、そうです、ng-click ディレクティブは angular によってコンパイルされませんでした。したがって、最も簡単な方法は onclick リスナーを使用することです。

 "<button onclick=\"angular.element(this).scope().botaoEdit('"+dbStuff[key].name+"')\">test button</button>"

引用符を追加することを忘れないbotaoEdit('')でください: 、フィドルで Stuff1 変数にアクセスしようとします:)

最後に、データを受信したときにテーブルの行を作成するグリッド プラグインまたは ng-repeat を使用するのが最善の方法だと思います。このアプローチでは、行の ng-click が正常に機能します。

于 2014-03-10T14:28:27.960 に答える