Accessing AngularJs Controller properties from the root node ng-if

Question

I want to access the angular controller property from the same tag where ng-controller is defined and hide the tag using ng-if if the property languages is having less than one element.

To be precise this is what my not working code looks like:

<li ng-controller="LanguageController" ng-if="languages.length > 1">
    ...
</li>

But if I do something like this then it works.

<li ng-controller="LanguageController">
    <div ng-if="languages.length > 1">...</div>
</li>

When I try this

<li ng-controller="LanguageController" data-val="{{languages.length}}">
...

The output is ... data-val="1".. which means

I can access the properties in the root element itself

To add to it, it also works when I use ng-show to hide my root element. Thanks to @sarjan-desai.

Question : But still why doesn't the ng-if work and remove my root li object, while the ng-show works?

Sarjan Desai · Accepted Answer · 2015-10-15 15:46:59Z

1

You can access ng-if or other ng directive in same element where you define your controller.

ng-if

The ngIf directive removes or recreates a portion of the DOM tree based on an {expression}. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.

ng-show

The ngShow directive shows or hides the given HTML element based on the expression provided to the ngShow attribute. The element is shown or hidden by removing or adding the .ng-hide CSS class onto the element.

ng-if removes or recreates elements which means when setting li element property, condition become false and ng-if remove controller and whole element.

For ng-show it's only shows or hides elements not adding or removing so in starting if condition false it only hide element not remove it and when $scope bind to element, it shows the data because condition becomes true.

Check below snippet

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function($scope) {

  $scope.addresses = [{
    'state': 'AL'
  }, {
    'state': 'CA'
  }, {
    'state': 'FL'
  }];
});

myApp.controller('MyCtrl1', function($scope) {

  $scope.addresses = [];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<li ng-controller="MyCtrl" ng-show="addresses.length > 0">Billing State: <tt>State selected: {{addresses}}</tt>
</li>
  <li ng-controller="MyCtrl1" ng-show="addresses.length > 0">This will not show.<tt>State selected: {{addresses}}</tt>
</li>
  </body>

edited Oct 15, 2015 at 15:46

answered Oct 15, 2015 at 15:22

Sarjan Desai

3,7332 gold badges21 silver badges32 bronze badges

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

1 Comment

Faraj Farook Over a year ago

Thanks alot.. it's possible. now only i realized the problem is that ng-if doesn't remove the item when its in the root element. I wil update the question :)

Magus · Accepted Answer · 2015-10-15 15:03:09Z

1

As a short answer : no.

Because when you are on your root element, your controller is not here yet. So the current scope is the scope of the parent controller (or the root scope if this is your first controller).

answered Oct 15, 2015 at 15:03

Magus

15.1k4 gold badges40 silver badges52 bronze badges

2 Comments

Faraj Farook Over a year ago

Thank you so how can i remove the root tag? Do i need to use the parent controller to do this?

Magus Over a year ago

You can only do that if languages is a property of the parent controller.

Collectives™ on Stack Overflow

Accessing AngularJs Controller properties from the root node ng-if

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related