Angular dependency issue

Question

HTML file:

<div class="header" ng-controller='HomeCtrl as homeCtrl'>
    <div class="panel-header container">
      <h1>UkrBook</h1>
      <ul class="nav nav-tabs navbar-right">
        <li ng-class="{active: homeCtrl.isSelected(1)}"><a href ng-click="homeCtrl.selectTab(1, 'home')">Головна</a></li>
        <li ng-hide="" ng-class="{active: homeCtrl.isSelected(2)}"><a href ng-click="homeCtrl.selectTab(2, 'login')">Увійдіть</a></li>
        <li ng-class="{active: homeCtrl.isSelected(3)}"><a href ng-click="homeCtrl.selectTab(3, 'register')">Реєстрація</a></li>
        <li ng-class="{active: homeCtrl.isSelected(4)}"><a href ng-click="homeCtrl.selectTab(4, 'about')">Про нас</a></li>
        <li ng-class="{active: homeCtrl.isSelected(5)}"><a href ng-click="homeCtrl.selectTab(5, 'profile')">Профіль</a></li>
        <li ng-class="{active: homeCtrl.isSelected(6)}"><a href ng-click="homeCtrl.selectTab(6, 'home', Auth.logout())">Вийти</a></li>
      </ul>
    </div>
  </div>

Controller piece:

.controller('HomeCtrl', function($state, Auth) {
    var homeCtrl = this;
    homeCtrl.tab = 1;
    homeCtrl.logout = Auth.logout;

    homeCtrl.selectTab = function(setTab, state, callback) {
      homeCtrl.tab = setTab;
      $state.go(state).then(callback),
        function(error) {
          console.log(error);
        };

    };

Auth service:

.factory('Auth', function($firebaseAuth, FirebaseUrl, $state) {
    var ref = new Firebase(FirebaseUrl);
    var Auth = $firebaseAuth(ref);

    Auth.logout = function(){
      ref.unauth().then(function(){
        console.log('Logged out');
        $state.go('home');
      }, function(error){
        authCtrl.error = error;
      });
    };

    return Auth;

The problem is following: Auth.logout method from HTML file can't be loaded, though I'm using HomeCtrl as a controller, which has DI Auth factory. So, to make it clear, this one won't work:

ng-click="homeCtrl.selectTab(6, 'home', Auth.logout())"

I have to add homeCtrl.logout = Auth.logout; to the HomeCtrl and call homeCtrl.logout in my HTML file.

Could someone please explain to me, why can't I do so and is it a proper way of injecting services? Also I would appreciate some good articles with examples about this. Thanks.

MarcoS · Accepted Answer · 2016-03-31 12:42:45Z

1

In a view, you only have access to controller data, through $scope. You can't access service methods.

The way you do inject service is correct.

For a good documentation about $scope, see angularjs official docs: https://docs.angularjs.org/guide/scope,

and for a good explanation of DI, see: https://github.com/angular/angular.js/wiki/Understanding-Dependency-Injection

edited Mar 31, 2016 at 12:42

answered Mar 31, 2016 at 12:30

MarcoS

17.8k27 gold badges101 silver badges189 bronze badges

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

2 Comments

Fleeck Over a year ago

Thanks. So, this is the only way how I can access? All the time reassigning method in the controller?

MarcoS Over a year ago

Yes. Usually you will not need all your services methods in your views, but a small fraction of them, or a combination of them...

Austin · Accepted Answer · 2016-03-31 12:31:01Z

1

While injecting the 'Auth' factory into your controller makes it available to call within your controller, it does not make it available to the view. The step that you took, homeCtrl.logout = Auth.logout exposes the Auth.logout function to the view.

answered Mar 31, 2016 at 12:31

Austin

1,29110 silver badges19 bronze badges

Comments

Martin · Accepted Answer · 2016-03-31 12:40:45Z

1

Instead of:

homeCtrl.logout = Auth.logout;

do:

homeCtrl.logout = function() { Auth.logout() };

You are losing context to the internal closure of the Auth constructor when you bind it directly to your controller this way.

answered Mar 31, 2016 at 12:40

Martin

16.4k4 gold badges51 silver badges58 bronze badges

Comments

M. Junaid Salaat · Accepted Answer · 2016-03-31 12:42:48Z

1

Just replace

<li ng-class="{active: homeCtrl.isSelected(6)}"><a href ng-click="homeCtrl.selectTab(6, 'home', Auth.logout())">Вийти</a></li>

by

<li ng-class="{active: homeCtrl.isSelected(6)}"><a href ng-click="homeCtrl.selectTab(6, 'home', homeCtrl.logout())">Вийти</a></li>

and in controller.

homeCtrl.logout = function() { Auth.logout() };

Hope it helps.

edited Mar 31, 2016 at 12:42

answered Mar 31, 2016 at 12:31

M. Junaid Salaat

3,8031 gold badge25 silver badges27 bronze badges

3 Comments

Walfrat Over a year ago

Poiting direclty to Auth.logout is rather a bad idea, he should rewrite his homeCtrl.logout to be homeCtrl.logout = function(){Auth.logout()};

Fleeck Over a year ago

Why should I wrap it into a function?

M. Junaid Salaat Over a year ago

Yes. It should lose its factory context. @Walfrat Thanks. Edited my answer.

Collectives™ on Stack Overflow

Angular dependency issue

4 Answers 4

2 Comments

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related