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

【问题标题】：passing object through directive scope not working通过指令范围传递对象不起作用
【发布时间】：2016-05-29 19:20:06
【问题描述】：

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

我有一个控制器：

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":"紫水晶","amount":131},{"name":"ruby","amount ":11},{"name":"citrine","amount":159},{"name":"coal","amount":23}]}

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

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

我根本没有输出。

我有什么遗漏或做错了吗？

【问题讨论】：

你真的忽略了user={{ resident }} 中的引号吗？因为那绝对行不通。试试user="{{ resident }}"
不带引号也能正常工作，添加引号并不能解决问题。

标签： javascript angularjs object data-binding angularjs-directive

【解决方案1】：

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

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

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

改变

scope: {
    user: '@',
}

到

scope: {
    user: '=',
}

和

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

【讨论】：

应该提到，但在我的用户块中，我得到了控制器和控制器。我猜这就是为什么 {{ blockController.user }} 首先显示数据的原因？
@Xiduzo 我没有在你的指令中看到控制器，你没有错过吗？
我的错，更新了帖子。认为这无关紧要。
很好，这解决了问题。太感谢了。我还必须按照 Dave 的建议将 user={{ resident }}' 更改为 user="resident"