实现使用$ location和$ emit的自定义Angular服务

时间:2017-12-07 21:36:57

标签: javascript angularjs

我试图在Angularjs中注册一个获取URL的自定义服务,然后将其发送回更高级别的控制器。我有1.使用app.service注册服务2.将服务名称传递给下级控制器3.我正在监听更高级别控制器的更改。当我在每个控制器中复制函数时,我有它工作,但我正在尝试重构。

module.js 注册服务

var app = angular.module('demo', ['ngRoute']);
app.service('changedUrlService', function() {
    this.getUrl = function(url) {
        $scope.emit('urlChange', url);
    }
});

lowerController.js 使用该服务的控制器

angular.module('demo').controller("lowerController", ['$scope', '$http','$location' 'changedUrlService', function ($scope, $http, $location, changedUrlService)
{
  $scope.url = $location.url();
  $scope.findUrl = changedUrlService.getUrl($scope.url);
  $scope.findUrl();
}

higherController.js 正在侦听emit

$scope.$on('urlChange', function (event, item) {
  $scope.myUrl = item;
  console.log($scope.myUrl);
});

我在调整此错误时收到了各种错误,包括未知提供商,$ scope未定义等等。

1 个答案:

答案 0 :(得分:0)

如果您看到以下代码,您将了解到您没有向服务注入任何内容。首先,您需要注入任何其他服务,然后才能使用它。但服务并不是注入$ scope的正确位置。

var app = angular.module('demo', ['ngRoute']);
app.service('changedUrlService', function() { // No dependencies injected
    this.getUrl = function(url) {
        $scope.emit('urlChange', url); // Incorrect
    }
});

您可以做的是,从字符串返回字符串。将此服务changedUrlService注入控制器并使用它来获取字符串。而不是从控制器调用emit函数。

如果有帮助,请告诉我。