CODEWITHSUNDEEP
htmlangularjsangular-ui-router
sss
sss

Reputation: 717

Difference between <div ui-view></div> and <ui-view></ui-view>?

I can't seem to find any major differences between the two other than being able to name the view when using it with a view. Is there a time when one is preferred over the other?

Upvotes: 4

Views: 3220

Answers (1)

kazenorin
kazenorin

Reputation: 1465

First, ui-view is an AngularJS directive. Generally speaking, directives may be declared as either an element attribute, a class, or an element (i.e. similar to a HTML tag), or any combination of the three depending on the directive itself.

In most cases, all three kinds of declaration would not affect the functionality of the directives.

So in practical sense, the major difference between <div ui-view></div> and <div><ui-view></ui-view></div> goes down to:

  1. Position in the HTML DOM Tree
    • <div ui-view></div> is a single <div> element in the DOM Tree
    • <div><ui-view></ui-view></div> is a <ui-view> element nested in a <div>
  2. AngularJS Scope hierarchy

The former may affect non-AngularJS stuff such as CSS selectors, jQuery element selection, etc.

While AngularJS Scope hierarchy may affect how scope variables are inherited, and how directives are prioritized against each other should there be two directives of the same priority.

In the ui-view case however, the scope aspect does not seem to be important.

Upvotes: 6

Related Questions