Angular ng-class scope/syntax?

Question

I have an angular directive (below) that manages icon placement and icon states. The code is working as is, but I feel that adding ng-class in my markup variables would eliminate the need for the setMaskingIcon function. That function is basically jquery, and it feels like the perfect candidate for an ng-class argument based on the privacy variable.

(function() {
'use strict';

angular
    .module('inputControls', [])
    .directive('inputControls', function($log) {

    var linkFunction = function(scope, element, attr) {

        var privacy = false;
        var setting = attr.inputControls;
        var controlMarkup;
        var baseMarkup = '<div class="icon-holder"></div>';
        var infoControl = '<icon class="icon-info"></icon>';
        var toggleControl = '<icon class="icon-show-hide icon-visible"></icon>';

        if(setting === 'info') {
            controlMarkup = infoControl;
        }else if(setting === 'toggle') {
            controlMarkup = toggleControl;
        }else if(setting === 'both') {
            controlMarkup = infoControl + toggleControl;
        }

        element.after(baseMarkup);
        element.next().append(controlMarkup);
        setMaskingIcon();

        element.next().find('.icon-show-hide').click(function(){
            privacy = !privacy;
            setMaskingIcon();
        });

        element.next().find('.icon-info').click(function(){
            $log.log('info click');
        });

        function setMaskingIcon() {
            if(privacy === true) {
                // these blocks are basically jquery. i tried using 
                // 'ng-class="{icon-visible:!privacy, icon-private:privacy}"'
                // but that didn't seem to do the trick. any advice would be awesome
                element.next().find('.icon-show-hide').removeClass('icon-visible');
                element.next().find('.icon-show-hide').addClass('icon-private');
            } else {
                element.next().find('.icon-show-hide').addClass('icon-visible');
                element.next().find('.icon-show-hide').removeClass('icon-private');
            }
        }

    };

    return {
        restrict: 'A',
        link: linkFunction
    };


  });

})();

raina77ow · Accepted Answer · 2015-08-26 19:54:41Z

1

Turn privacy variable (private to a linking function currently, thus inaccessible outside) into a property of scope:

scope.privacy = false;
// ... then in clickHandler:
scope.privacy = !scope.privacy;

In this case it will be properly evaluated in your ng-class expression. Also you might consider using ng-show instead, if you're toggling the visibility of these elements only, not their styling.

edited Aug 26, 2015 at 19:54

answered Aug 26, 2015 at 19:46

raina77ow

107k16 gold badges205 silver badges240 bronze badges

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

4 Comments

ackerman Over a year ago

Thanks for the response! I added scope to the var (and added it to the args in the ng-class), but that didn't change the outcome when I added 'ng-class="{icon-visible:!scope.privacy, icon-private:scope.privacy}"' back to the markup strings. Did I miss a step?

raina77ow Over a year ago

You mean you added this class to the strings that become appended? But in this case you also should append the result of $compile(controlMarkup)(scope) instead.

ackerman Over a year ago

I really appreciate the help, but I think I'm missing something.. can you tell me where I need to add the compile function?

raina77ow Over a year ago

element.next().append($compile(controlMarkup)(scope)).

Collectives™ on Stack Overflow

Angular ng-class scope/syntax?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related