AngularJS,是用良好的服务的这种方式?(AngularJS, is this way of

2019-07-20 10:12发布

我这个HTML:

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

和控制器是:

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

该服务工作正常,所以我不代码粘贴到这里......在这种情况下,结果是我以这种方式改变了HTML 的“Hello world!”:

<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.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];
}

为什么我这样做的原因是,我们要保持控制器尽可能保持清洁,并具有我们在一个集中的地方的所有数据。 另外,服务中的大多数数据予以曝光。



文章来源: AngularJS, is this way of using service good?