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.

score 0 · Answer 1 · answered Aug 22 '16 at 13:07

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 '16 at 13:07

Thalaivar

23,282
5
60
71

I replaced `visibility`by `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` – redAce Aug 22 '16 at 13:15
inside your link function create scope.columnVisible = columnVisible and now pass that to your _tdElement.data – Thalaivar Aug 22 '16 at 13:17
I get a `ReferenceError: columnVisible is not defined` and you want to me to pass `scope.columnVisible` like `_tdElement.data(scope.columnVisible)` ? – redAce Aug 22 '16 at 13:26
You need to pass the scope variable to var aoColumnDefs = scope.aoColumnDefs || _buildAoColumnDefs(scope, element, value); here... – Thalaivar Aug 22 '16 at 13:31
since you are already passing the scope there... collect it like this.. _tdElement.data(scope.columnVisible) – Thalaivar Aug 22 '16 at 13:32
`scope.columnVisible` is undefined, in both the`link` function and when used by `_tdElement.data(scope.columnVisible)` – redAce Aug 22 '16 at 13:45
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/121537/discussion-between-redace-and-thalaivar). – redAce Aug 22 '16 at 13:52
Can you print out visibility in your view and check if value is passed. – Thalaivar Aug 22 '16 at 14:11
can you do a scope.columnVisible = scope.columnVisible; and then check... or even remove this line in link if you have added and check – Thalaivar Aug 22 '16 at 14:25

Evaluate $scope variable as value to a directive attribute

1 Answers1