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>

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

公开代理方法 ：

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

您可以使用这些方法中的任何一种或混合它们，但在一天结束时，函数必须最终在作用域上 （直接或通过作用域上公开的另一个对象）。

Answer 2

另一种方法：

在$ rootScope上公开服务 ：

$rootScope.service = service;

然后在模板中：

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

您可以在app.run上执行此操作，您将在应用的所有视图中获得该服务。 您可以将此方法用于身份验证服务。

Answer 3

在$ scope中公开服务的另一种方法是添加一个指向服务方法/数据对象的函数指针。

scope.serviceData = service.data;
// Or
scope.getServiceData = service.getData;

在视图中，您可以使用括号调用它。

<input ng-model="serviceData().key" />
// Or
<input ng-model="getServiceData().key" />
// Or
{{getServiceData().key}}

我个人喜欢这种方法，我目前正在使用它，以保持多个视图与相同的数据同步。 尽管如下所述，它确实提出了一些问题： AngularJS。 关于从服务进行正确的双向数据绑定的最佳实践

至于暴露于大量数据，我目前正试图做这样的事情。

// Within your view.
{{getServiceDataByKey('key')}}

// In your controller.
scope.getServiceDataByKey = service.getServiceDataByKey;

// In your service.
getServiceDataByKey : function (key) {
   return dataObject[key];
}

我这样做的原因是我们希望尽可能保持控制器的清洁，并将所有数据放在一个集中的位置。 此外，还应公开服务中的大多数数据。