Why does my custom AngularJS directive not work within a select option?
Question
I have a custom directive that I want to use within a select option element. I explicitly do not want to move the select into the directive's template, because I use the same directive at other places, too. Unfortunately, I cannot get it to work within a select option, probably because there is some intricate detail which I do not yet understand. Ideas, anyone?
Here is my simplified example, derived from a documentation example (also on Plunker at http://plnkr.co/edit/Cod5menNABfeETTtah45?p=preview ):
<head>
<meta charset="UTF-8">
<title>Directive not working in select option</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.3/angular.min.js"></script>
<script>
angular.module('docsSimpleDirective', [])
.controller('Controller', ['$scope',
function($scope) {
$scope.customerId = 2;
$scope.customers = {
'1': {
name: 'Naomi',
address: '1600 Amphitheatre'
},
'2': {
name: 'Jim',
address: '1200 South'
}
};
}
])
.directive('myCustomer', function() {
return {
scope: {
cust: '='
},
template: '{{cust.name}}'
};
});
</script>
</head>
<body ng-app="docsSimpleDirective">
<div ng-controller="Controller">
<h3>Simple ng-repeat (Works)</h3>
<ul>
<li ng-repeat="(cid, cust) in customers"><span>Plain: {{cust.name}}</span> / Directive: <span my-customer cust="cust"></span>
</li>
</ul>
<h3>Select Options (Does not work)</h3>
<select ng-model="customerId">
<option ng-repeat="(cid, cust) in customers" value="{{cid}}" ng-selected="cid == customerId">
Plain: <span>{{cust.name}}</span> / Directive: <span my-customer cust="cust"></span>
</option>
</select>
<br/>{{customers[customerId].address}}
<br/>(<span my-customer cust="customers[customerId]"></span>)
</div>
</body>
</html>
1 answers
solution1
0 2014-03-30 21:10:15
BenCr's comment was right. It does not work because of the span. Thank you! If I use the directive directly on the option element, it does actually work:
<body ng-app="docsSimpleDirective">
<div ng-controller="Controller">
<h3>Simple ng-repeat</h3>
<ul>
<li ng-repeat="(cid, cust) in customers" my-customer cust="cust"></li>
</ul>
<h3>Select Options</h3>
<select ng-model="customerId">
<option ng-repeat="(cid, cust) in customers" value="{{cid}}" ng-selected="cid == customerId" my-customer cust="cust"></option>
</select>
<br/>{{customers[customerId].address}}
<br/>(<span my-customer cust="customers[customerId]"></span>)
</div>
</body>
New Plunker: http://plnkr.co/edit/Cod5menNABfeETTtah45?p=preview
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.