Как правильно передать объект в пользовательскую директиву?

Question

У меня есть очень «простая» цель: у меня есть своего рода создатель формы, и эта директива должна «отображать» содержимое формы.

Для этого я создал настраиваемую директиву, которую планирую передать объект, и создать логику для создания шаблонов. Тем не менее, я не в состоянии передать объект в пользовательской директивы

HTML:

<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> 

JS

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>' 
    }; 
}); 

Я сделал и изменил код много раз с различными примерами, которые я получил на , но через 2 дня мне не удалось заставить его работать (да, это позорно)

Вот fiddle link

Я знаю, что проблема заключается в переходе к директиве, потому что если я удалю тег комментария из ng-repeat, данные будут отображаться правильно, но если я попытаюсь использовать директиву, это не сработает.

Пожалуйста, помогите мне и объясните, почему это не работает и что мне не хватает?

Answer 1

Благодарим за предоставление jsfiddle. Я не уверен, что я бы заметил проблему без нее.

Оказалось, что вы получили орфографическую ошибку restrict (вы остановились на «t» в конце), и вам нужно было оставить ссылку на scope на вид.

Отметьте обновленный (и рабочий) fiddle here.