2015-01-03 2 views
1

есть контроллер заголовка и частичный вид на моей странице, как:нг если не работает в частичном - Угловая

<html ng-app="myApp" ng-controller="headerCtrl"> 
<head> 
    <link rel="stylesheet" href="~/App/Common/Style/Common/common.css" data-ng-if="!isRTL"> 
    <link rel="stylesheet" href="~/App/Common/Style/Common/common-ltr.css" data-ng-if="isRTL"> 

</head> 
<body> 
... 
</body> 

частичного вид

<div class="clearfix"> 
    <div class="directionSetting"> 
     <p class="pull-left">RTL</p> 
     <div class="pull-right"> 
      <label class="switch"> 
       <input type="checkbox" ng-model="isRTL" /> 
       <span></span> 
      </label> 
     </div> 
    </div> 
</div> 

я хочу, чтобы изменить направление после нажмите на флажок, но он не работает!
, но если я добавлю это в тело, он работает. как я могу это достичь?

+0

возможно дубликат [Угловое изменение направления с нг-если] (HTTP: //stackoverflow.com/questions/27754106/angular-change-direction-with-ng-if) –

+0

Это не ясно, поэтому я спрашиваю еще раз –

+0

isRTL записывается в область с детьми в этом случае. Хорошего способа гарантировать, что этого не произойдет, - использовать синтаксис Controller, а затем использовать вместо него «ctrlAsName.isRtl». – Jens

ответ

1

Ваша проблема, по-видимому, является общей проблемой детского прицела в угловом.

рабочий пример: http://plnkr.co/edit/WVdH6rhzxXDtdxT8stXR?p=preview

Важные детали:

<html ng-app="demo" ng-controller="siteController as site"> 
    <head> 
    <link rel="stylesheet" href="style.css"/> 
    <link rel="stylesheet" href="style.ltr.css" ng-if="!site.isRtl" /> 
    <link rel="stylesheet" href="style.rtl.css" ng-if="site.isRtl" /> 
    </head> 
    <body ng-controller="bodyController as body"> 

Это нормально, что вы пытаетесь использовать контроллер, но ваше связывание связывается непосредственно с областью, это означает, что при попытке связать что с ng-моделью в частичном представлении, вы нарушаете прототипическое наследование и записываете значение непосредственно в область дочернего элемента. Это объясняется еще более сложной задачей.

Я предпочитаю использовать контроллер в качестве синтаксиса, поскольку это помогает гарантировать, что этого не произойдет, вы можете прочитать больше о том, что здесь: http://toddmotto.com/digging-into-angulars-controller-as-syntax/

1

Это не будет работать, потому что браузер игнорирует директиву и загружает обе таблицы стилей.

Решение может состоять в том, чтобы использовать пространство таблиц стилей, например.

.my-class { 
    color: blue; 
    margin-top: 10px; 
    // other defaults for this class 
} 
.rtl .my-class { 
    color: green; 
    // just the differences for the special needs of RTL 
} 

и в вашем теле или HTML добавить

<body ng-class="{rtl: isRTL}"> 
    ... 
</body> 

Если вы используете CSS препроцессор как less, SASS или Stylus, то Пространства имен намного проще.

+0

thx много, но не могли бы вы увидеть это? http://themicon.co/theme/angle/v1.6.1/#/app/dashboard они меняют направление, как я. –

+0

так что значит, я должен удалить ng-if? –

+0

ОК, ссылка, которую вы указали, доказывает, что она обычно работает с ng-if, поэтому я ошибался. Они используют объект '$ rootScope.layout', а не контроллер, как вы. Вы можете проверить, работает ли он с '$ rootScope'. – hgoebl

Смежные вопросы