CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-includeng-controller
Shawn
Shawn

Reputation: 2735

AngularJs - Using ng-controller with ng-include

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';
}

Upvotes: 1

Views: 6322

Answers (2)

sourdoughdetzel
sourdoughdetzel

Reputation: 664

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?

Upvotes: 1

Diego Polido Santana
Diego Polido Santana

Reputation: 1435

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>

Upvotes: 0

Related Questions