在角改变方向 [英] Changing direction in Angular

问题描述

我试图改变SP-权类SP-留在角programticlly：结果
HTML

I'm trying to change sp-right class to sp-left programticlly 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路由器），回来将其改为原来的！结果
任何想法？

It works fine , but when i click on link(ui-router) and come back it changed to original !
Any Idea ?

推荐答案

您必须记住的状态（在你的案件的方向）无论是在一个控制器，它是在一个水平（如身体），将不会被用户界面所取代-router或（IMO preferable）你还记得在服务状态（。服务| .factory | .value的）。

You have to remember the state (in your case the direction) either in a controller which is on a level (e.g. body) that will not be replaced by ui-router or (IMO preferable) you remember the state in a service (.service|.factory|.value).

例如：

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

而当你在一个安全的地方的状态，那么你可以改变一个更angularish的方式实现的：

And when you have the state in a safe place, then you could change your implementation in a more "angularish" way:

<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';
            });
        }
    };
}]);  

这篇关于在角改变方向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！