AngularJs - Using ng-controller with ng-include

Question

This works:

<div ng-include="'login.html'" flex ng-if="!loggedIn" ng-controller="LoginController"></div>

However, this doesn't ({{test}} outputs nothing):

<ng-include src="'login.html'" flex ng-if="!loggedIn" ng-controller="LoginController"></ng-include>

Is there any reason? Or is it a bug?

login.html:

<p>{{test}}</p>

LoginController:

function LoginController($scope){
    $scope.test = 'login';
}

What do you mean by it doesn't work? It doesn't show up? The controller doesn't pass in scope variable? It displays a monkey? — Chris Stanley
– Chris Stanley, Commented May 10, 2016 at 2:03

sourdoughdetzel · Accepted Answer · 2016-05-10 03:44:22Z

1

I'm not exactly sure where "loggedIn" is defined, but when I define it on a parent controller, both syntaxes work as expected.

Plunkr

<div ng-controller="PrntCtrl">
      <div ng-include="'test.html'" flex ng-if="!loggedIn" ng-controller="TestCtrl"></div>
      <ng-include src="'test.html'" flex ng-if="!loggedIn" ng-controller="TestCtrl"></ng-include>
    </div>

Some questions to consider: What version of angular are you using? How is your app defined and how is the controller registered with the app? Where is "loggedIn" defined?

answered May 10, 2016 at 3:44

sourdoughdetzel

6643 silver badges6 bronze badges

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

Comments

Diego Polido Santana · Accepted Answer · 2016-05-10 02:48:03Z

0

Because this directive accepts only 3 arguments:

ngInclude | src = string
onload (optional) = string
autoscroll (optional) = string

...according to the ngInclude Docs

EDIT:

you can solve simply wrap it in another element...

<div ng-if="!loggedIn" ng-controller="LoginController">
  <div ng-include="'login.html'" flex></div>
</div>

edited May 10, 2016 at 2:48

answered May 10, 2016 at 2:09

Diego Polido Santana

1,43511 silver badges19 bronze badges

2 Comments

Shawn Over a year ago

Then why can I put ng-if there? ng-if works on both examples.

Diego Polido Santana Over a year ago

you can solve simply wrap it in another element... <div ng-if="!loggedIn" ng-controller="LoginController"><div ng-include="'login.html'" flex></div></div>

Collectives™ on Stack Overflow

AngularJs - Using ng-controller with ng-include

2 Answers 2

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Linked

Related