我有这个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中直接使用服务功能的唯一方法,还是我遗漏了某些东西?
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(); };
您可以使用这些方法中的任何一种,也可以将它们混合使用,但是 到最后,功能必须在范围上结束 (直接或通过在范围上公开的另一个对象)。