2016-06-14 2 views
0

Я пытаюсь привязать выражение, используемое в атрибуте ng-show, к результату селектора jQuery. Причина этого заключается в том, что мне нужно, чтобы скрыть/показать элемент на основе наличия другого элемента (ng-view)Использовать результат селектора jQuery в выражении углов

Разметка я в настоящее время является

<div ng-view id="partialView"></div> 

<div ng-show="$('#partialView').length === 0"> 
    <h1>MAIN CONTENT</h1> 
</div> 

и когда это оказывается я получаю:

<!-- ngView: --> 
<div ng-show="$('#partialView').length === 0" class="ng-hide">...</div> 

, когда ng-view не предусмотрена, или

<div ng-view id="partialView">...</div> 
<div ng-show="$('#partialView').length === 0" class="ng-hide">...</div> 

выражение в ng-show не оценивается (или просто не переоценивается).

Мой вопрос

ли это правильный способ связать ng-show с присутствием другого элемента в DOM, и если это правильный способ сделать это, то, что случилось с моим синтаксисом, который останавливая это от работы?

ответ

0

Ваше представление не знает, что $() в вашем контроллере назначает jQuery $ на $scope элемент, например. $scope['$'] = $

+0

то же относится, если вы хотите использовать встроенный Javascript функции, такие как 'parseInt', Ф.О. r их для использования в привязке они должны быть назначены члену '$ scope' –

1

ng-show работа с областью действия, которую вы определили в контроллере.

вы должны определить область с помощью jQuery или области видимости.

как

$scope.partialView=0 //or any thing that you want. 

<div ng-show="partialView === 0" class="ng-hide">...</div> 
0

Благодаря помощи @ Басанты-правил и @ мартеновской-Гленнон я переехал логику в контроллер, так что теперь мой контроллер имеет функцию, определенную на это область применения:

var LandingPageController = function ($scope) { 
    $scope.noPartialView = function() { 
     return $('#partialView').length ===0; 
    }; 
}; 

и вид выглядит следующим образом:

<div ng-view id="partialView"></div> 

<div ng-show="noPartialView()"> 
    <h1>Main Content</h1> 
</div>