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上执行此操作,您将在应用的所有视图中获得该服务.您可以将此方法用于身份验证服务.