通过绑定将 JSON 对象和服务传递给组件答案

【问题标题】：Passing JSON object and service to a component through binding通过绑定将 JSON 对象和服务传递给组件
【发布时间】：2019-09-01 19:32:00
【问题描述】：

我正在尝试构建一个基本上是“CRUD 列表”的组件。在组件的顶部有一个表单。在这个表单下有一个现有对象的列表。

例如，您可以有一个表单来创建汽车，您有两个字段“汽车名称”、“汽车型号”。在此表单下，您拥有已创建汽车的列表。

我构建了一个通用组件，它使用数据模型来显示字段和列表。数据模型如下所示：

ctrl.dataModel =  {
            "fields" : [
            {"fieldName":"name", "fieldDescription":"Nom", "fieldType":"boolean"},
            {"fieldName":"description", "fieldDescription":"Description de l'application", "fieldType":"boolean"}
        ],
        "dataName":"Applications"
};

当我手动设置数据模型和数据时，组件运行良好。我现在可以将此标记用于 HTML 片段：

<crudlist></crudlist>

我想将一个数据模型“传递”给这个 crudlist 组件，所以我做了这个绑定声明：

angular.
module('CrudlistModule').   
component('crudlist', { 
bindings: { 
    datamodel:"=",  
},

templateUrl: 'modules/crudlist/crudlist.template.html', 
controller: [crudlistController]
}
);

但是当我尝试使用此代码将任何内容注入数据模型时：

<crudlist datamodel="ANYTHINGHERE"/></crudlist>

似乎数据模型在控制器中未定义。我使用了一个简单的“console.log("...")”来显示它。

为了查看控制器中定义的内容，我这样做了：“console.log(ctrl);”，但我从来没有看到任何类型的数据模型。

您可以在这里找到所有文件：http://plnkr.co/edit/6x8b2IC2YAvZJG0TVcDl

如果你能帮助我，非常感谢！

【问题讨论】：

标签： angularjs binding

【解决方案1】：

只是快速浏览：

组件将控制器定义为 var ctrl = this;但是组件的默认值是 $ctrl，因此您要么想要添加 controllerAs: 'ctrl' 要么将 ctrl 更改为 $ctrl。
定义了 controllerAs: 'ctrl' 但在您的模板中您使用的是 $ctrl。
您也没有在应用程序模块依赖项中包含 CrudListModule。

我不确定是否还有其他问题，但是看的时候这两件事跳出来了。一旦你在 $ctrl 或 ctrl 上得到了所有东西，你会更加设置，你可能还想包含 index.html 并将它们全部放在一起，这样你就可以看到它的实际效果。

【讨论】：