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

我有这个HTML：

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

服务很好，所以我不在这里粘贴代码。。。 在本例中，结果是“你好，世界！” 我以这种方式更改了HTML：

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

然后是HTML

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

你好{{{ser.getUsername（）；}

这很有效

所以我的问题是：

---

这是在HTML中直接使用服务功能的唯一方法，还是我遗漏了什么？AngularJS模板只能调用作用域上可用的功能。所以，无论采用何种方法，都需要将函数放在作用域上

如果您希望服务的功能可以从模板直接调用，您有几个选项：

您尝试过的一个-即在一个作用域上公开整个服务：

$scope.service = service;

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

$rootScope.service = service;

然后在模板中：

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

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

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

然后在模板中：

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

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

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

---

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

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

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

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

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

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

另一种方法：

在$rootScope上公开服务：

$scope.service = service;

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

$rootScope.service = service;

然后在模板中：

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

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

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

你好{{{service.getUsername（）；}

---

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

回答得好。但是，如果不是某种类型的视图服务，并且您的模板需要serive的所有功能，我会避免将整个服务对象添加到范围中。您通常只想在模板所需的范围内添加数据/函数，其他什么都不需要。@AndersEkdahl我同意，您可能不想经常使用这种方法。但我想一切都取决于服务。我只是在这里介绍一些选项，需要考虑不同的权衡。如果您正在使用“只公开所需的方法”解决方案，并且您的服务正在通过“this”调用它自己的一些内部方法，那么您需要将您的公开包括在一个“bind”中：$scope.method=（service.method）.bind（service）；那太脏了。我喜欢！