Question

我有一个视图部分“nameplate.jade”，它有一些绑定用户对象的属性。在另一个页面上，我想看到他们的名牌所见的用户列表。所以我想做的就是以某种方式发送用户或者user._id我将从我所在的任何控制器中获取并让它呈现铭牌，然后继续呈现下一个持有的第一个。

我如何将它用于一个铭牌

div(ng-controller="LoginCtrl")
    div(ng-show="logged_in()")
        a(href="/profile/{{ currentUser.handle }}")
            nameplate(user="{{currentUser}}")

如果我想要一个铭牌列表

，我将如何使用它

div(ng-repeat="participant in event.participants")
    nameplate(userid="participant.userid")

nameplate.jade

.nameplate

    .imageColumn
        .image
            img(src="{{ user.avatar }}")

    .otherColumn
        .nameRow
            a(ng-href="/profile/{{ user.handle }}") {{ user.handle }}

铭牌指令

.directive('nameplate', (User) ->
        restrict: 'E'
        replace: true
        scope:
            user: '@currentuser'
            userid: '@userid'
        templateUrl: '/partials/nameplate'
        link: (scope, elems, attrs) ->
            # I've tried a lot of things that didn't work here

Answer 1

我在使用user: '@currentuser' 但我应该一直在使用user: '&currentuser'

密钥在我的指令范围哈希

中

.directive('nameplate', () ->
        restrict: 'E'
        replace: true
        scope:
            user: '&currentuser'
        templateUrl: '/partials/nameplate'
        link: (scope, elems, attrs) ->
            scope.$watch scope.user, (_user) ->
                scope.user = _user
    )

我试图获取{{currentUser}}，但它一直在隔离范围内执行，并且在父范围的currentUser更改时没有更新。因此，使用'scope。$ watch'来监听价值变化并使用&代替@解决了我的问题

来自Angularjs Directive Guide

范围 - 如果设置为：{}（对象哈希）


＆安培;或＆amp; attr - 提供在父作用域
的上下文中执行表达式的方法

修改

要详细说明下面的Andy评论，你可以将指令语法减少到：

.directive('nameplate', () -> restrict: 'E' replace: true scope: user: '=currentuser' templateUrl: '/partials/nameplate' )

根据我的用例，我甚至不需要指定链接功能

使用自定义角度指令在SO上制作铭牌

1 个答案: