Question

我想知道如何正确使用$emit方法，以便在我的错误回调中我可以触发模态。

我有以下工厂：

angular.module('BBPlnkr').factory("Session", [
  '$http', '$q', '$rootScope', function($http, $q, $rootScope) {
    var service;
    service = {
      requestCurrentUser: function() {
        if (service.isAuthenticated()) {
          return $q.when(service.currentUser);
        } else {

        }
        return $http.get('current_user').then(function(resp) {
          console.log(resp.data);
          service.currentUser = resp.data;
          return service.currentUser;
        }, function(resp) {
          if (resp.status === 401) {
            $rootScope.$emit("loginRequired", "err");
            console.log('You are not authetnicated');
          }
        });
      },
      currentUser: null,
      isAuthenticated: function() {
        return !!service.currentUser;
      }
    };
    return service;
  }
]);

这个工厂只是检查用户是否为current_user，如果不是则返回401.我想做的是在调用此错误回调时，错误回调是触发模式。现在我发现我可以使用$emit方法，但不确定我是否正确使用它。在错误回调中，我想通过作用域链调度事件。这是$emit做得对的。但我不完全确定我是否正确设置了它。所以这样做。我有我的控制器：

myApp.controller('MainController', ['$scope', '$rootScope', '$modal', '$location', '$route', function($scope, $rootScope, $modal, $location, $route) {

      $rootScope.$on('loginRequired', function(event, second_param){
        /* Do the modal stuff here??*/
    });
  }
]);

我知道我实际上并没有做任何事来触发模态（$ modal.open）。但我想知道我是否朝着正确的方向前进。如果没有，一些建议会有所帮助。我在线查看了$emit，$broadcast周围的文档。我知道两者之间的区别。一旦在范围链上调度事件，就会在$ scope链中调度事件。

Answer 1

选项1

angular.module('BBPlnkr').factory("Session", [
  '$http', '$q', '$rootScope','$scope', function($http, $q, $rootScope,$scope) {
    var service;
    service = {
      requestCurrentUser: function() {
        if (service.isAuthenticated()) {
          return $q.when(service.currentUser);
        } else {

        }
        return $http.get('current_user').then(function(resp) {
          console.log(resp.data);
          service.currentUser = resp.data;
          return service.currentUser;
        }, function(resp) {
          if (resp.status === 401) {
            $scope.$emit("loginRequired", "err");
            console.log('You are not authetnicated');
          }
        });
      },
      currentUser: null,
      isAuthenticated: function() {
        return !!service.currentUser;
      }
    };
    return service;
  }
]);

option2

myApp.controller('MainController', ['$scope', '$rootScope', '$modal', '$location', '$route', function($scope, $rootScope, $modal, $location, $route) {
$rootScope.loginRequired = fn(){}

  }
]);

angular.module('BBPlnkr').factory("Session", [
  '$http', '$q', '$rootScope', function($http, $q, $rootScope) {
    var service;
    service = {
      requestCurrentUser: function() {
        if (service.isAuthenticated()) {
          return $q.when(service.currentUser);
        } else {

        }
        return $http.get('current_user').then(function(resp) {
          console.log(resp.data);
          service.currentUser = resp.data;
          return service.currentUser;
        }, function(resp) {
          if (resp.status === 401) {
            $rootScope.loginRequired()
            console.log('You are not authetnicated');
          }
        });
      },
      currentUser: null,
      isAuthenticated: function() {
        return !!service.currentUser;
      }
    };
    return service;
  }
]);

但我认为你过度使用根范围以及发射和广播的范围

Emit和broadcast用于跨范围进行通信，这里您用于在相同范围内进行通信。 $ rootScope只适用于整个应用。它是一种全局缓存。
由于rootScope在应用程序中是全局且唯一的，因此您应该谨慎使用它。我会选择option1，因为只有顶级模块才能访问rootScope，这只是为了监听子范围正在做什么。

参考：http://docs.angularjs.org/api/ng/type/ $ rootScope.Scope

Answer 2

Himangshuj mentions some good points关于上述范围，所以我不会对此提出异议。

如果您正在寻找一种干净的方式来处理控制器中的对话框，那么这个线程有一个可以与Bootstrap或类似的模态对话框架一起使用的指令。

Simple Angular Directive for Bootstrap Modal

使用指令和对话框标记，显示模式应该像控制器中的$scope.showDialog = true;一样简单。

希望有所帮助。

正确使用$ emit方法来显示模态

2 个答案: