Question

HTML文件：

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

    };

验证服务：

.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;

问题如下：虽然我使用Auth.logout作为控制器，但是已经使用HomeCtrl工厂，因此无法加载来自HTML文件的Auth方法。所以，要说清楚，这个不会起作用：

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

我必须将homeCtrl.logout = Auth.logout;添加到HomeCtrl并在我的HTML文件中调用homeCtrl.logout。

有人可以向我解释一下，为什么我不能这样做，这是一种注入服务的正确方式吗？另外，我会欣赏一些有关此例子的好文章。感谢。

Answer 1

在视图中，您只能通过$ scope访问控制器数据。您无法访问服务方法。

您注射服务的方式是正确的。

有关$ scope的详细文档，请参阅angularjs官方文档：https://docs.angularjs.org/guide/scope，

有关DI的详细解释，请参阅：https://github.com/angular/angular.js/wiki/Understanding-Dependency-Injection

Answer 2

将“Auth”工厂注入控制器使其可在控制器内调用时，它不会使视图可用。您执行的步骤homeCtrl.logout = Auth.logout将Auth.logout函数公开给视图。

Answer 3

只需替换

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

通过

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

并在控制器中。

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

希望它有所帮助。

Answer 4

而不是：

homeCtrl.logout = Auth.logout;

做的：

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

当您通过这种方式将Auth构造函数直接绑定到控制器时，您将失去对Auth构造函数内部闭包的上下文。

角度依赖问题

4 个答案: