AngularJS，就是这种使用服务的方式好

Question

我有这个HTML:

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

控制器为：

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

服务运行良好，所以我不在这里粘贴代码。。。在这种情况下，结果是"世界你好！"我用这种方式更改了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];
}

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