Question

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

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

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

          <label for="favorite-vacation-place">Where is your favorite place to vacation?:</label>
          <form action="">
          <input type="checkbox" name="destination" value="hawaii">Hawaii <br>
          <input type="checkbox" name="destination" value="tahiti">Tahiti <br>
          <input type="checkbox" name="destination" value="tahoe">Lake Tahoe <br>
          <input type="checkbox" name="destination" value="bvi">British Virgin Islands <br>
          <input type="checkbox" name="destination" value="europe">Europe <br>
          <input type="checkbox" name="destination" value="sofa">Your Sofa
          </form>
        </div>

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

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

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

<crudlist></crudlist>

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

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

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

似乎控制器中的数据模型未定义。我用一个简单的“ console.log（” ...“）”来显示它。

为了查看在控制器中定义了什么，我完成了此操作：“” console.log（ctrl）;“，而我从没见过任何类型的数据模型。

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

非常感谢您的帮助！

Answer 1

快速浏览：

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

我不确定是否还有其他问题，但是在查找时这两件事跳了出来。一旦您掌握了$ ctrl或ctrl上的所有功能，您将需要进行一些设置，您可能还希望包含index.html并将其全部组合在一起，以便可以实际使用它。

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

1 个答案: