4
I have a directive that returns me a select that when selected I want to take the value of the code by the controller and make an http request.
4
I have a directive that returns me a select that when selected I want to take the value of the code by the controller and make an http request.
1
You can add the directive ng-change
in his select
and create a function to receive the data:
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"
}
})
Note that in the controller
added a function: $scope.pegarSelecionado
that receives an item as a parameter. Within this function you can call the service that makes the http request by passing the item
for her.
In your directive I added only one excerpt, to say that the controller
of hers is the MainCtrl
. If I didn’t do it ng-change
that I put on your page would not be seen by controller
.
1
You have bound the dadosCombo
, where in reality it should bind the selectedItem
You should keep an eye on changing the model if you want to take action after the item change happens ($watch) Follows the solution:
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 Directive:
<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>
Browser other questions tagged angularjs angularjs-directives selecteditem
You are not signed in. Login or sign up in order to post.
Your solution does not make the peer directive independent. You make the directive highly coupled to the controller. The intention in creating the template of a directive in principle should be 100% independent of the context of the controller to which it is inserted.
– Roger Barretto
Really, I didn’t stop to think about it
– DiegoAugusto