AngularJS，这种使用服务的方式好吗？

Question

我有这个HTML：

<p>Hello {{name}}</p>

控制器是：

function myCtrl(scope, service) {
    scope.name = service.getUsername(); // service.getUsername() return "World!"
}
myCtrl.$inject = ['$scope', 'originalService'];

该服务运行良好，因此我不在此处粘贴代码…在这种情况下，结果是“ Hello world！ ”。我以这种方式更改了HTML：

<p>Hello {{service.getUsername()}}</p>

但这是行不通的。

我改变了控制器：

function myCtrl(scope, service) {
    scope.ser = service;
}
myCtrl.$inject = ['$scope', 'originalService'];

然后是HTML

<p>Hello {{ser.getUsername();}}</p>

这可行！

所以我的问题是：

这是直接在HTML中直接使用服务功能的唯一方法，还是我遗漏了某些东西？

Answer 1

AngularJS模板只能调用作用域上可用的函数 。因此，无论采用哪种方法，都需要在示波器上具有功能。

如果您想直接从模板调用服务的功能，则有几种选择：

您尝试过的一种-也就是说，将整个服务公开在一个范围内 ：

$scope.service = service;

然后在模板中：

<p>Hello {{service.getUsername();}}</p>

这是控制器中的一种代码，使所有服务方法在示波器上可用，从而可用于模板。

一对一的曝光方法

对暴露的内容进行精确控制：

$scope.getUsername = service.getUsername;

然后在模板中：

<p>Hello {{getUsername();}}</p>

这需要更多的工作公开方法，但是可以对所公开的内容进行细粒度的控制。

暴露proxing方法 ：

$scope.getMyUsername = function() {
   //pre/post processing if needed 
   return service.getUsername();
};

您可以使用这些方法中的任何一种，也可以将它们混合使用，但是 到最后，功能必须在范围上结束 （直接或通过在范围上公开的另一个对象）。