Angular JS - Take the value sent by the select of a directive

Asked

Viewed 4,721 times

4

angularjs angularjs-directives selecteditem

2 answers

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

    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.

  • Really, I didn’t stop to think about it

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.