Javascript 如何正确地将对象传递给自定义指令？

我有一个非常“简单”的目标：我有一种表单创建者，这个指令被期望“呈现”表单的内容

为此，我创建了一个自定义指令，计划将其传递给对象，并创建一个用于渲染模板的逻辑。但是，我无法将对象传递给自定义指令

HTML:

组件启动

组件端

JS

angular.module（'myApp'，[]）
.controller（'myController'，函数（$scope）{
$scope.items=[
{type:'TextArea'，data:'Somedata1'，必填项：true}，
{type:'List'，data:'Somedata2'，必填项：false}，
{type:'Select'，data:'Somedata3'，必填项：true}]；
})
.directive（'myComponent'，function（）{
返回{
restric'E'，
作用域：{obj:'=obj'}，
template:'这是{{obj.type}}的模板'
};
});

我在网上用不同的例子多次编写和修改代码，但两天后我无法使其工作（是的，这是可耻的）

这是你的电话号码

我知道问题是在传递到指令时，因为如果我从ng repeat中删除注释标记，数据将正确显示，但如果我尝试使用指令，它将不起作用

---

请，有人能帮我解释一下为什么这不起作用以及我缺少了什么吗？

感谢您提供JSFIDLE。如果没有它，我不确定我会发现这个问题

结果表明您拼写错误了

restrict

（您在末尾省略了“t”），并且需要在视图中省略对

范围的引用

查看您的更新（和工作）
 多谢各位。虽然我认为自己是个业余爱好者，但在发布这个问题之前，我花了2天时间。我检查并更新了小提琴，效果很好。也感谢你的解释
<div ng-controller="myController">

    <p>Components starts</p>
    <div ng-repeat="item in items">
        <!-- <p>{{item}}</p> -->
        <my-component obj="item" ></my-component>
    </div>
    <p>Components ends</p>

</div>

angular.module('myApp', [])
.controller('myController', function($scope) {

    $scope.items = [
        { type: 'TextArea', data: 'Somedata1', mandatory: true },
        { type: 'List', data: 'Somedata2', mandatory: false },
        { type: 'Select', data: 'Somedata3', mandatory: true }];

})
.directive('myComponent', function() {
    return {  
        restric: 'E',
        scope: { obj: '=obj' },
        template: '<div> This is the template for {{obj.type}} </div>'
    };
});