1

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';
}
Shawn
  • 2,675
  • 3
  • 25
  • 48

2 Answers2

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?

sourdoughdetzel
  • 664
  • 3
  • 6
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>
Diego Polido Santana
  • 1,425
  • 11
  • 19