Question

我有一个角度指令（下面），用于管理图标放置和图标状态。代码按原样运行，但我觉得在我的标记变量中添加ng-class将不再需要setMaskingIcon函数。该函数基本上是jquery，感觉它是基于ng-class变量的privacy参数的完美候选者。

(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
    };


  });

})();

Answer 1

将privacy变量（当前为私有链接函数，因此无法在外部访问）转换为范围属性：

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

在这种情况下，它将在您的ng-class表达式中正确评估。如果您只是切换这些元素的可见性，而不是他们的样式，您也可以考虑使用ng-show。

Angular ng-class范围/语法？

1 个答案: