Question

我正在尝试将sp-right类改为sp-left programiclly in angular：
Html

<span class="sp-right">
    <label>
        Number:
    </label>
</span>

指令

app.directive("buttonThatTrigger", function () {
    return {
        restrict: 'C',//target all elements with class button-that-trigger
        link: function (scope, element, attrs) {
            element.click(function(){
               $('.sp-right, .sp-left').toggleClass("sp-right sp-left");
            });
        }
    };
});

它工作正常，但当我点击链接（ui-router）并返回时它变为原始！
有什么想法吗？

Answer 1

我不知道您的要求是什么，但是您有没有理由不使用ngClass？

<div ng-class='whatClassIsIt(position)' ng-click='position = !position'>

然后你做

$scope.position = true;

// true=sp-right, false=sp-left
$scope.whatClassIsIt(pos){
  return pos? "sp-right" : "sp-left";
};

Answer 2

你必须记住一个控制器的状态（在你的情况下是方向），该控制器位于一个不会被ui-router替换的级别（例如主体）上或者（IMO更好）你还记得服务中的状态（.service|.factory|.value）。

示例：

app.value('layoutState', {
        direction: 'right'
    });

当你把国家安置在一个安全的地方时，你可以用一种更“有棱角”的方式改变你的实施：

<span class="{{layoutState.direction === 'right' ? 'sp-right' : 'sp-left'}}">
    <label>
        Number:
    </label>
</span>

您的指示：

app.directive("buttonThatTrigger", ['layoutState', function (layoutState) {
    return {
        restrict: 'C',//target all elements with class button-that-trigger
        link: function (scope, element, attrs) {
            scope.layoutState = layoutState;
            element.click(function(){
                layoutState.direction = layoutState.direction === 'right' ?
                    'left' : 'right';
            });
        }
    };
}]);

改变Angular的方向

2 个答案: