Communicative directive

by masudcsesust04

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<h1>5. Communicative directive</h1>

<div ng-app="myApp">
    <div class="col-sm-6 pull-left" ng-controller="mySelectCtrl">
    <form class="form-horizontal" ng-submit="submit()">      
        <div class="form-group">
          <label for="role" class="col-sm-3 control-label">Role</label>
          <div class="col-sm-9">
              <div class="input-group" style="width: 100%">
                  <input type="text" class="form-control" style="width: 90%" id="role" placeholder="Role" ng-model="user.role">
                  <dropdown-single-select pre-selected="user.role" model="user.role" options="roles"></dropdown-single-select>
              </div>
          </div>
      </div>
    </form>
  </div>
</div>

JavaScript

'use strict';

/* App Module */

var app = angular.module("myApp", []);

app.controller("mySelectCtrl", function($scope) {
    $scope.roles = [
            {name: "Admin", value: 'Admin'},
            {name: "Super Admin", value: 'Super Admin'},
            {name: "Organization Admin", value: 'Organization Admin'}
    ];   
    $scope.user = {role: ''}

    $scope.loadData = function() {
        console.log("Called from directive!");            
    };

});

// Directive
app.directive('dropdownSingleSelect', function() {
    return {
        restrict: 'E',
        scope: {
            model: '=',
            options: '=',
            pre_selected: '=preSelected'
        },
        template: '<div class="input-group-btn">'+
      '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">'+
        '<span class="caret"></span>'+
        '<span class="sr-only">Toggle Dropdown</span>'+
      '</button>'+
      '<ul class="dropdown-menu dropdown-menu-right" role="menu">'+
        '<li ng-repeat="option in options"><a ng-click="setSelectedItem()">{{option.name}}</a></li>'+
      '</ul>'+
    '</div>',
        link: function($scope) {
            console.log($scope);
            $scope.setSelectedItem = function () {
                var value = this.option.value;
                $scope.model = value;
                // $scope.loadData();
                // return false;
            };
        }
    };
});