javascript - AngularJS - 一切都取决于我的登录服务？

Question

这里是 Angular 新手。

我创建了一个登录服务，这样当用户登录时，我将用户名、电子邮件、ID、个人资料图片等信息存储在哈希中。

其他 Controller 可以通过添加此登录服务的依赖项来检索此信息，然后访问正确的属性。示例

function MyController(loginservice) {
    this.getUsername = function() {
        return loginService.userData.userName;
    }

    this.getUserId = function() {
        return loginService.userData.userId;
    }

    this.getProfilePictureUrl = function() {
        return loginService.userData.profilePictureUrl;
    }
}

这工作得很好...但是，几乎每个指令、每个组件和每个页面现在都取决于登录服务，因为它们需要某种形式的信息。

我认为另一种方法是使组件本身与登录服务无关，并简单地将所需的数据作为属性传递。例如

<my-directive username="myController.getUsername()" userId="myController.getUserId()">
</my-directive>

<my-profile picturePath="myControllere.getProfilePicUrl()" username="myController.getUsername()" userId="myController.getUserId()">
</my-directive>

但是，这似乎有点矫枉过正。

这里有什么想法吗？

Answer 1

为 userData 的每个属性创建函数和元素属性确实使事情变得过于复杂。

如果您需要 Controller 中的 userData，只需分配整个对象一次。然后在 View 中您可以添加显示所需的适用属性

在 Controller 或指令中:

this.user = loginService.userData

查看中:

My Name is {{myController.user.userName}}
<img ng-src="{{myController.user.profilePictureUrl}}">

或者:

<my-directive user="myController.user"></my-directive>

正如上面评论中所述，您也可以轻松地将用户服务注入(inject)指令中，并避免在 Controller 和指令属性中创建相同的范围项，然后在指令范围中创建相同的范围项。

<小时/>

此外，您拥有的所有 getter 函数都不会在 Controller 中创建，而是会在服务中创建，因此它们也可供其他组件使用。所显示的结构是向后的

例如，从您当前的 Controller 代码:

this.getUserId = function() {
    return loginService.userData.userId;
}

应该看起来更像:

this.userId = loginService.getUserId();//method defined in service