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

passing object through directive scope not working

本文关键字：对象 不起作用 范围 指令      更新时间：2023-09-26

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

我有一个控制器，带有：

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

在我的配置中：

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

在诱惑中.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: '@',
    }
}

在用户块中最终.html：

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

我得到了以下输出：

{"用户名"："Xiduzo"，"user_id"：123，"经验"：123456789，"total_energy"：100，"energy_left"：50，"卢比"：[{"名称"："祖母绿"，"金额"：106}，{"名称"："蓝宝石"，"金额"：43}，{"名称"："紫水晶"，"金额"：131}，{"名称"："红宝石"，"金额"：11}，{"名称"："黄水晶"，"金额"：159}，{"名称"："煤"，"金额"：23}]}

但是当我想获取用户名并喜欢时：

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

我根本没有输出。

我错过了什么或做错了什么吗？

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

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

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

改变

scope: {
    user: '@',
}

自

scope: {
    user: '=',
}

和

<user-block user=resident></user-block>
相关文章：