To become more dynamic my directive decided to include the category field that makes the selection of the type of template to be displayed. As it is only a select thought of using the switch - ng instead of several html files. (google translate)
Plunker: http://plnkr.co/edit/fnCJj15XJN1kQvKq1OtZ?p=preview
index.html
<div ng-controller="MainCtrl">
<sg-combo
selected-item="selectedItem" categoria="filtro">
</sg-combo>
{{selectedItem}}
script.js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.selectedItem = {value: null};
$scope.$watch('selectedItem',function(item){
if (item != null){
alert(item.nome); // does not display when updating
}
})
});
app.directive('sgCombo', function(){
function link(scope, elem, attrs){
scope.dados = [
{'codigo':1, 'nome':'teste1'},
{'codigo':2, 'nome':'teste2'},
{'codigo':3, 'nome':'teste3'}
];
}
return {
restrict: 'E',
scope: {
selectedItem: '=',
categoria: '@'
},
link: link,
templateUrl:"sg-combo.html"
}
})
sg-combo.html
<div ng-switch="categoria">
<div ng-switch-when="filtro" class="col-sm-4 control-label">
<div class="col-sm-4 control-label">
<label>{{label}}</label>
<select ng-model="selectedItem.value" ng-options="item.nome for item in dados" class="form-control"></select>
</div>
</div>
<div ng-switch-when="anexo" class="col-sm-4 control-label">
<div class="col-sm-4 control-label">
<label>{{label}}</label>
<select ng-model="selectedItem.value" ng-options="item.nome for item in dados" class="form-control"></select>
</div>
</div>
</div>