javascript - 通过指令范围传递对象不起作用

Question

我正在尝试通过 HTML 模板将对象从 Controller 传递到指令以在另一个 HTML 模板中使用该对象。

我有一个 Controller :

function controller($state, $rootScope) {
    var vm = this;
    vm.residents = [object];
}

在我的配置中:

function config($sateprovider) {
    [..],
    templateUrl: [..]/template.html,
    [..]
}

在 templtate.html 中我得到:

<div ng-repeat="resident in controller.residents>
    <user-block user={{ resident }}></user-block>
</div>

在我的用户阻止指令中，我得到:

function userBlock() {
    restrict: 'E',
    templateUrl: [..]/userblock.html,
    controller: 'blockController',
    controllerAs: 'blockCtrl',
    bindTocController: true,
    replace: true,
    scope: {
        user: '@',
    }
}

最后在 userblock.html 中:

<div>{{ blockCtrl.user }}</div>

我得到以下输出:

{"username":"Xiduzo","user_id":123,"experience":123456789,"total_energy":100,"energy_left":50,"rupees":[{"name":"emerald", "amount":106},{"name":"sapphire","amount":43},{"name":"紫 Crystal ","amount":131},{"name":"ruby","amount ":11},{"name":"黄 Crystal ","amount":159},{"name":"coal","amount":23}]}

但是当我想获取用户名并执行以下操作时:

<div>{{  blockCtrl.user.username }}</div>

我根本没有任何输出。

是否有什么我遗漏或做完全错误的事情？

Answer 1

本质上，问题是您正在使用 @ 绑定(bind)(单向绑定(bind))，通过它将 user 对象传递给指令隔离范围。但问题是 @ 隐藏了字符串中任何类型的变量。因此，当用户变量到达指令范围时，它不是纯用户对象。它只不过是用户 JSON 对象的字符串化版本。

这就是为什么当您尝试像 JSON 一样访问它时不起作用。

我建议您使用 = (双向绑定(bind))传递该字段将使其正常工作并保留对象类型。

改变

scope: {
    user: '@',
}

至

scope: {
    user: '=',
}

还有

<user-block user=resident></user-block>