Angular 共 class scope/syntax？

Question

我有一个 angular 指令（如下）来管理图标放置和图标状态。代码按原样工作，但我觉得在我的标记变量中添加 ng-class 将消除对 setMaskingIcon 函数的需要。该函数基本上是 jquery，感觉它是基于 privacy 变量的 ng-class 参数的完美候选者。

(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 共 class scope/syntax？

Angular ng-class scope/syntax?

angularjs

syntax

scope

ng-class