Directive binding with AngularJS

Question

I've created a custom directive in AngularJS. In the link function I'm adding the ng-model and ng-options attributes to the inner template, but, unfortunately the binding doesn't work. But when I place the inner template as is into my html file all works well.

application.directive("customSelect", function () {
var directive = {
    restrict: 'E',
    template: '<select name="ArrDeplocation" class="arrdepSelect"></select>',
    link: function (scope, elem, attr) {
        console.log('scope: ', scope);
        console.log('element: ', elem);
        console.log('attribute: ', attr);

        $(elem.children()[0]).attr('ng-model', 'model.selectedCity');
        $(elem.children()[0]).attr('ng-options', 'city for city in model.cities');

        $(elem.children()[0]).selectmenu();

    }
};
return directive;
});

Tried, it throws and exception, saying $apply is in process

Dimkin
– Dimkin

2013-04-25 07:32:15 +00:00
Commented Apr 25, 2013 at 7:32 — Dimkin
– Dimkin, Commented Apr 25, 2013 at 7:32

Tosh · Accepted Answer · 2013-04-25 08:13:54Z

3

I don't understand why you need to set attributes in the link func. You can simply put into your template.

http://plnkr.co/edit/9u6nkLYKHxBBiJ60mpbF?p=preview

app.directive("customSelect", function () {
  var directive = {
    restrict: 'E',
    template: '<select name="ArrDeplocation" class="arrdepSelect"'
     + 'ng-model="model.selectedCity" ng-options="city for city in model.cities">    </select>',
    link: function (scope, elem, attr) {
      // run jquery mobile methods here...
    }
  };
  return directive;
});

You may want to elaborate what you really want to achieve here.

answered Apr 25, 2013 at 8:13

Tosh

36k11 gold badges67 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Adam · Accepted Answer · 2013-11-20 18:36:27Z

If you want to modify your template in the link function, then you must recompile it.

Solution: http://plnkr.co/edit/bpiqXdQe91RJBaJXTPXO?p=preview

app.directive("customSelect", function ($compile) {
  return {
    restrict: 'E',
    template: '<select name="ArrDeplocation" class="arrdepSelect"></select>',
    link: function (scope, elem, attr) {
      elem.find('select').attr({
        'ng-model':   'model.selectedCity',
        'ng-options': 'city for city in model.cities'
      });
      var tpl = elem.html();
      elem.html($compile(tpl)(scope));
      elem.find('select').selectmenu();
    }
  };
});

The $compile("html string") compiles the template into:

a link function which is used to bind template (a DOM element/tree) to a scope

Collectives™ on Stack Overflow

Directive binding with AngularJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related