Evaluate $scope variable as value to a directive attribute

Question

I'm trying to hide a column by evaluating $scope.visibility value to a custom directive as attribute, but it's not working.

<td data-column-visible="visibility" data-table-property='id' data-table-property-type='button'>
    <button class="btn btn-xs btn-default" data-toggle="modal"
        ng-click="modify(user)">
        <i class="icon-pencil bigger-110"></i>
    </button>
    <button class="btn btn-xs btn-danger" data-toggle="modal"
        ng-click="delete(user)">
        <i class="icon-trash bigger-110"></i>
    </button>                   
</td>

My directive :

'use strict';

define([ 'appModule' ], function(app) {
    // see example
    // http://stackoverflow.com/questions/14242455/using-jquery-datatable-with-angularjs
    app.directive('appDatatable', [ '$rootScope', '$compile', function($rootScope, $compile) {
        var _buildAoColumnDefs = function(scope, tableElement, tableData) {
                ....
                var defs = {
                    "mData": _tdElement.data("tableProperty"), "aTargets":[index], "bVisible": _tdElement.data("columnVisible")
                };
                ....
            return result;
        };
            return {
                scope : {
                    ...
                    columnVisible: "="
                },
                link : function(scope, element, attrs) {

                    // Watch changing aaData.
                    var dataTable = null;
                    scope.$watch('aaData', function(value) {
                        ...
                        var aoColumnDefs = scope.aoColumnDefs || _buildAoColumnDefs(scope, element, value);
                        ... 
                    }, true);
                }
            };
        }]);
    });

It always evaluates to "visibility" instead of true/false.

Thalaivar · Accepted Answer · 2016-08-22 13:07:31Z

0

The data-column-visible="visibility" the visibility which you pass from your controller should be a primitive value... that's why its not changing as it create a new scope.

In your controller it should be $scope.visibility = true or false. Change that to an object.

$scope.someObject = {}
$scope.someObject.visibility = true or false

Its always advice to pass a object, not primitives.

answered Aug 22, 2016 at 13:07

Thalaivar

23.7k5 gold badges63 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

redAce Over a year ago

I replaced visibilityby someObject.visibility in my $scope, and i still do have the same problem. When i console.log(_tdElement.data("columnVisible")) i'm still getting someObject.visibility

Thalaivar Over a year ago

inside your link function create scope.columnVisible = columnVisible and now pass that to your _tdElement.data

redAce Over a year ago

I get a ReferenceError: columnVisible is not defined and you want to me to pass scope.columnVisible like _tdElement.data(scope.columnVisible) ?

Thalaivar Over a year ago

You need to pass the scope variable to var aoColumnDefs = scope.aoColumnDefs || _buildAoColumnDefs(scope, element, value); here...

Thalaivar Over a year ago

since you are already passing the scope there... collect it like this.. _tdElement.data(scope.columnVisible)

|

Collectives™ on Stack Overflow

Evaluate $scope variable as value to a directive attribute

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related