4

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.

Plunker: http://plnkr.co/edit/fnCJj15XJN1kQvKq1OtZ

2 Respostas 2

1

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>
1

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.

2
  • 1
    A 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
  • Verdade, não parei pra pensar nisso rs Commented 23/12/2015 às 18:31

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .