javascript - How to correctly pass an object to a custom directive? -
i have "simple" goal: have kind of form creator, , directive expected "render" content of form.
for that, created custom directive planing pass object , create logic rendering trough templates. however, failing pass object custom directive
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> template {{obj.type}} </div>' }; });
i have made , changed code many times different examples got on web, after 2 days not able make work (yes, shameful)
here fiddle link
i know issue when passing directive, because if remove comment tag ng-repeat, data show correctly, if try use directive not work.
please, can me , explain me why not working , missing?
thanks providing jsfiddle. i'm not sure have spotted problem without it.
turns out misspelling restrict
(you left off 't' @ end), , needed leave out reference scope
in view.
check out updated (and working) fiddle here.
Comments
Post a Comment