将Javascript对象（DataTable列）传递给Angular指令

Question

I'm trying to derive jquery datatable to create my custom datatable and make the columns dynamic. I can't pass the colums as an object. I'm getting a string in the directive controller.

    var columns = 
        { 
            cols: [
            {
                "mDataProp": "Name",
                "render": function (data, type, full, meta) {
                    return '<a href="#/u/d/' + full.Id + '">' + full.Name + '</a>';
                }
            },
            { "mDataProp": "prop2" }


    };
    function getColumns() {
        return columns;
    }



<my-table 
          columns='columns'
          message="my message"></my-table>



app.directive('myTable', function () {
    return {
        restrict: 'E',
        templateUrl: '/TableView.html',
        replace: false,
        controller: function ($scope) {
            // $scope.urun = 
           // $scope.arg1 = attrs.headerText;
           //
        },
        scope: {
            columns: '=columns'
        },
        link: function (scope, element, attrs) {

            var columns = attrs.columns;
            console.log(columns);

        }
    }

Answer 1

You need to assign your variable columns to a scope property in your controller and then:

app.directive('myTable', function () {
    return {
        restrict: 'E',
        templateUrl: '/TableView.html',
        replace: false,
        controller: function ($scope) {
            // $scope.urun = 
           // $scope.arg1 = attrs.headerText;
           //
        },
        scope: {
            columns: '='
        },
        link: function (scope, element, attrs) {

            var columns = $scope.columns;
            console.log(columns);

        }
    }

More info on how scope config works: $compile