Tenho uma directiva que me retorna um select que quando selecionado eu quero pegar o valor do código pelo controller e fazer uma requisição http.
2 Respostas
Voce bindou o dadosCombo
, onde na realidade deveria bindar o selectedItem
Voce deve ficar de olho na alteração do modelo, se deseja fazer alguma ação após a mudança do item acontecer ($watch) Segue a solução:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.selectedItem = null;
$scope.$watch('selectedItem',function(newValue){
alert(newValue.codigo);
})
});
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: '='
},
link: link,
templateUrl:"sg-combo.html"
}
})
HTML Diretiva:
<div class="col-sm-4 control-label">
<label>{{label}}</label>
<select ng-model="selectedItem" ng-options="item.nome for item in dados" class="form-control"></select>
</div>
HTML BODY
<body ng-controller="MainCtrl">
<h1>Select em Directiva</h1>
<sg-combo selected-item="selectedItem"></sg-combo>
{{selectedItem}}
</body>
Você pode adicionar a diretiva ng-change
em seu select
e criar uma função para receber os dados:
sg.combo.html
<div class="col-sm-4 control-label">
<label>{{label}}</label>
<select ng-model="dadosCombo" ng-change="pegarSelecionado(dadosCombo)" ng-options="item.nome for item in dados" class="form-control"></select>
</div>
App.js
app.controller('MainCtrl', function($scope) {
var codigo = $scope.selectedItem;
$scope.pegarSelecionado = function(item){
console.log(item);
//Faz a requisição Http
}
});
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',
controller: 'MainCtrl',
scope: {
dadosCombo: '='
},
link: link,
templateUrl:"sg-combo.html"
}
})
Repare que no controller
adicionei uma função: $scope.pegarSelecionado
que recebe um item como parâmetro. Dentro dessa função você pode chamar o serviço que faz a requisição http passando o item
pra ela.
Na sua diretiva adicionei um trecho só, pra falar que o controller
dela é o MainCtrl
. Se eu não fizesse isso o ng-change
que coloquei em sua página não seria enxergado pelo controller
.
-
1A sua solução não torna a diretiva do colega independente. Voce torna a diretiva altamente acoplada ao controller. A intenção na criação da template de uma diretiva em principio deverá ser 100% independente do contexto do controller a qual ela estiver inserida. Commented 23/12/2015 às 18:27
-