Question

我正在使用Angular（1.x）并且遇到了一种奇怪的行为（我不排除这是我的代码的结果）。

以下是设置：

var module = angular.module('module_name');

module.service('service_name', function() {
    this.function_name = function() { ... }
});

module.controller('controller_name', ['$scope', 'service_name',
    function($scope, service_name) {

        $scope.function_name = function() { ... }
}])

在视图中：

<div ng-controller='controller_name'>
    <button ng-click="function_name()">Test</button>
</div>

可以通过 service_name.function_name（）在控制器中访问service_name中的函数。但这是奇怪的行为，（再次发生在更复杂的设置中，并不是说这部分代码会重现所描述的场景）

单击视图中的按钮时，调用的函数不是来自控制器的 function_name ，而是来自服务的 function_name 。

尽管它们具有相同的名称，但视图如何直接在服务中访问函数，是否应该仅限于其控制器范围？

Answer 1

这根本不可能发生，除非并且直到你的代码中某处写下

$scope.function_name = service_name.function_name

服务没有任何本地范围。在角度视图侧点击事件期望在控制器（读取本地）范围内运行。

我怀疑你的情况是，因为JS是所有参考，你必须在大文件中做这样的事情：

var dummy = service_name.function_name
...
$scope.function_name = dummy

Answer 2

如果您不想在控制器中重新定义功能名称，可以执行以下操作。

module.service('service_name', function() {
 this.function_name = function() { ... }

 return {
  function_name : function_name
 }
});

module.controller('controller_name', ['$scope', 'service_name',
  function($scope, service_name) {

  $scope.utils = service_name;
}]);

然后在您的视图中直接调用该函数。

<div ng-controller='controller_name'>
  <button ng-click="utils.function_name()">Test</button>
</div>

那就是它。

Answer 3

最好使用例如控制器和服务名称控制器为abcCtrl，服务为abcService等。

为什么，因为你更容易调用它。而且它并不令人困惑

AngularJS通过视图调用服务功能

3 个答案: