AngularJS plugin initialization after ng repeat

Question

So i am using MaterializeCSS, and have this piece of code:

<select>
<option value="" disabled selected>Jump To Season</option>
<option option-item  ng-repeat="item in series.seasons" value="{{item.id}}">
{{item.name}}
</option>
</select>

And im using this directive:

.directive("optionItem", [function () {
return {
    restrict: 'A',
    link: function (scope, element) {
        if (scope.$last) {
            $('select').material_select();
        }
    }
};
}]);

Now the elements do repeat as many times as necessary, but instead of displaying the $scope.item.name value it is just displaying {{item.name}} as plain text, not as an expression value. How do i overcome this setback? I tried using Material Angular md-select but i also experienced issues with it, every time i clicked the select i can't click on anything in the webpage and nothing happens.

IMPORTANT NOTE: The series.seasons array is fetched via ajax call.

See this: http://stackoverflow.com/questions/12371159/how-to-get-evaluated-attributes-inside-a-custom-directive — Soggiorno, Jan 24 '16 at 18:03

vorant · Answer 1 · 2016-01-24T19:16:16.140

1

set option-item directive on select

  <select option-item>
       <option value="" disabled selected>Jump To Season</option>
       <option ng-repeat="item in users" value="{{item.id}}">
           {{item.name}}
        </option>
  </select>

and change directive

.directive("optionItem", ['$timeout', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element) {
            $timeout(function() { // wait ng-repeat
                $('select').material_select();
            })
        }
    };
}]);

http://jsfiddle.net/vorant/q9bkrzfo/5/

edited Jan 24 '16 at 19:16

answered Jan 24 '16 at 18:45

vorant

708
5
15

Hi, I'm afraid i still get the correct amount of options, but empty of content. I added a note to my question, the items are retrieved via ajax call. (The ajax call works for sure if i display them as a regular select they work). – Bodokh Jan 25 '16 at 10:57

score 0 · Answer 2 · answered Jan 24 '16 at 18:08

Suggest you try using $timeout() to see if moving to next digest cycle helps

.directive("optionItem", ['$timeout',function ($timeout) {
return {
    restrict: 'A',
    link: function (scope, element) {
        if (scope.$last) {
            $timeout(function(){
               element.parent().material_select();
            });
        }
    }
};
}]);

Note however you may also need to require ngModel controller and manage the model changes yourself from within the plugin events

If this doesn't do it create a plunker demo with needed resources to replicate this

With your code i get similar results, instead of the expression showing up in plain text, i get empty options. — Bodokh, Jan 24 '16 at 18:18

AngularJS plugin initialization after ng repeat

2 Answers2