AngularJS: Access injected controller in template

Question

I have 2 controllers, ItemController and AuthenticationController.

AuthenticationController is injected into ItemController

ItemModule.controller('ItemController', function ($scope, AuthenticationController)

I am now trying to call the isLoggedIn() function in AuthenticationController from the template.

How can I do that?

Answer 1

One way is to put the IsLoggedIn method on the $scope, something like this:

$scope.isLoggedIn = AuthenticationController.isLoggedIn

You can now call this function in your template

<span>Logged In: <strong>{{IsLoggedIn()}}</strong></span>

Answer 2

I am not really sure whether injecting controllers is a good practice since each controller should focus on its own part. If you want to share information among them, you should use services. Instead of injecting controllers; vou might nest them in your front end. For example:

// js
app.controller('ParentController', function($scope) {
    $scope.person = {greeted: false};
});

app.controller('ChildController', function($scope) {
    $scope.sayHello = function() {
    $scope.person.name = "Ari Lerner";
    $scope.person.greeted = true;
    }
});

// html
<div ng-controller="ParentController">
    <div ng-controller="ChildController">
        <a ng-click="sayHello()">Say hello</a>
    </div>
    {{ person }}
</div>

// displayed:
{greeted:true, name: "Ari Lerner"}