Use result of jQuery selector in Angular expression

Question

I am trying to bind the expression used in a ng-show attribute to the result of a jQuery selector. The reason for this is that I need to hide/show an element based on the presence of another element (ng-view)

The markup I have currently is

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

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

and when this is rendered I get:

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

when the ng-view is not provided, or

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

the expression in the ng-show is not being evaluated (or maybe simply not re-evaluated).

My question is

Is this the correct way to bind the ng-show to the presence of another element in the DOM, and if it is the correct way to do it, what is wrong with my syntax that is stopping it from working?

Basant Rules · Accepted Answer · 2016-06-14 09:36:23Z

1

ng-show work with scope that you defined in controller.

you should define scope with jQuery or scope.

like

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

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

answered Jun 14, 2016 at 9:36

Basant Rules

82712 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Martin Glennon-Brown · Accepted Answer · 2016-06-14 09:30:18Z

0

Your view does not know what $() is, in your controller assign the jquery $ to $scope element e.g. $scope['$'] = $

answered Jun 14, 2016 at 9:30

Martin Glennon-Brown

2911 silver badge8 bronze badges

1 Comment

Martin Glennon-Brown Over a year ago

the same also applies if you want to use built in Javascript functions like parseInt, for them to usable in binding they must be assigned to a member of $scope

MikeW · Accepted Answer · 2016-06-14 09:49:31Z

0

Thanks to the help of @basant-rules and @martin-glennon I moved the logic into the controller, so now my controller has a function defined on it's scope:

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

and the view looks like:

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

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

answered Jun 14, 2016 at 9:49

MikeW

1,6302 gold badges20 silver badges42 bronze badges

Collectives™ on Stack Overflow

Use result of jQuery selector in Angular expression

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related