Angular expression in ng model

Question

I am trying to create a custom select element with an Angular directive.

The template in this directive contains the select element with the ng-model attribute that I want to get from the user element.

<custom-select inner-model="modelName"> <select model="{{model}}"></select> </custom-select> 

My Angular problem does not allow an Angular expression as the value of the ng-model attribute.

I also tried setting the attribute with

 link: function(scope, element, attributes) { element[0].childNodes[0].setAttribute('data-ng-model', attributes.innerModel); } 

It accepts an attribute with the correct value, but it still does not work.

Here is my pluker: Plunker

Answer 1

You need to define an isolated area. This essentially binds the outer region property assigned to the inner-model attribute to the scope innerModel inner property, which you can then use in your template.

 app.directive('customSelect', function() { return { restrict: 'E', transclude: true, scope: { innerModel: "=" } template: '<select ng-model="innerModel" data-ng-transclude></select>', }; }); 

Then you could do:

 <custom-select inner-model="someScopeProperty"> <option value="1">One</option> <option value="2">Two</option> ... </custom-select> 

(Although, I'm still puzzled by what you are trying to achieve)