AngularJS ng-repeat data in directive from parent?

Question

I'm trying to get data from a form element and then insert a using jQuery .after() to display possible choices. My direct gets the possible matches from the form by getting a attribute called "data" that is loaded by using AngularJS. The issue now, is when I try to ng-repeat with the new inserted it doesn't list it.

'use strict';

angular
    .module('autoComplete', [])
    .directive('autoComplete', autoComplete);

function autoComplete($parse)  {
    var directive = {
        restrict: 'EA',
        require: '?ngModel',
        link: link,
    };

    return directive;

    function link(scope, elem, attr, ngModel) {
        var modelGet = $parse(attr['ngModel']);
        var modelSet = modelGet.assign;
        scope.$watch(function() {
            return modelGet(scope);
        }, function() {
            var string = modelGet(scope);
            if (string != undefined && string.length > 6) {
                var vm = this;
                vm.data = attr.data;
                vm.width = elem.outerWidth();
                elem.after('<div><ul class="list-group" style="position: absolute; width: '+vm.width+'px;"><li class="list-group-item" ng-repeat="codes in vm.data track by $index">{{code}}</li></ul></div>');

                console.log(vm.data); //This outputs the data just fine
            }

        });
    }
}

Once that is placed in, the only things that is produced on the screen is {{code}}. I'm assuming I should be trying to compile this somehow in angular?

Yes for this to work you need to compile, but why do you do this like this in Jquery and not in a regular more angular-y way ? — Omri Aharon, May 13 '15 at 18:51
I'd say minimize the JQuery, could you create a fiddle of what you have at the moment ? Would be much easier to work on that. — Omri Aharon, May 14 '15 at 05:42

score 0 · Answer 1 · edited May 23 '17 at 11:44

0

You could try adding a $scope.apply() after elem.after(... to help digest the changes made in the $scope.watch().

Reference: https://stackoverflow.com/a/15113029/2242217

edited May 23 '17 at 11:44

Community

1
1

answered May 13 '15 at 18:53

vandsh

1,329
15
12

1

Is this a question or an answer? If you need to clarify something, use comments – New Dev May 13 '15 at 18:56
No clarity was needed, it was rhetorical. Answer has been updated. – vandsh May 13 '15 at 19:00

AngularJS ng-repeat data in directive from parent?

1 Answers1