javascript - AngularJS : directive ng-repeat doesn't work in link function -
i'm trying create directive "auto complete" , display data underneath form element.
i'm having problem getting ng-repeat in inserted html display array of information gets attr.
in directive i'm monitoring attr waiting data populated, , once it's populated, set variable in directive , try ng-repeat data in ul html. nothing being shown, though variable populated in directive.
any ideas why? i've tried doing lot of things, i'm sure it's parent/child scope issue, not sure need change? i'm trying keep directive scope isolated can reuse directive multiple times.
plunker: http://plnkr.co/edit/xoxli0oyrp6xobsdimoe
//directive function autocomplete($parse, $compile, $timeout) { var directive = { restrict: 'ea', // scope: true, require: '?ngmodel', link: link }; return directive; function link(scope, elem, attr, ngmodel) { var cdata = []; var modelget = $parse(attr['ngmodel']); var modelset = modelget.assign; scope.$watch(function() { return elem.attr('data'); }, function(newval) { cdata = newval; console.log(cdata); }); $timeout(function(){ //var ewidth = elem.outerwidth(); //doesn't work in plunker reason var ewidth = '100%'; var html = '<div><ul class="list-group" style="position: absolute; width: '+ewidth+'px;"><li class="list-group-item" ng-repeat="codes in cdata track $index">{{codes.code}}</li></ul></div>'; elem.after($compile(html)(scope)); scope.$apply(); console.log("div has been added"); }); scope.$watch(function() { return modelget(scope); }, function() { var string = modelget(scope); if (string != undefined && string.length >= 6) { console.log("will later"); } }); } }
ok, found combination of errors in code makes not work. see below:
- in
link
,cdata
not on scope, cannot accessed html data
contains array , not string, cannot interpolatedata="{{stuff}}"
- instead, need
$watch
attr.data
- since add information scope, should new 1 using
scope: true
that may it, see fixed plunkr: http://plnkr.co/edit/k9d9h8syaqnw3ukui1xt?p=preview
Comments
Post a Comment