Passing values to custom directive in angular js

Question

I am new to angular js custom directive and i have created the following directive for 3 way toggle switch as below with html and css.

JS Code

(function () {
  "use strict";
  var directiveId = "myToggle";
  angular.module("myApp").directive(directiveId, [function () {
    return {
        restrict: 'E',
        template:
                '<div class="ng-toggle-switch">'+
                '   <input type="radio" class="ng-toggle-switch-input" name="view"  id="selected" checked>'+
                '   <label for="selected" class="ng-toggle-switch-label">selected</label>'+

                '   <input type="radio" class="ng-toggle-switch-input" name="view"  id="unselected1">'+
                '   <label for="unselected1" class="ng-toggle-switch-label">unselected</label>'+

                '   <input type="radio" class="ng-toggle-switch-input" name="view"  id="unselected2" >'+
                '   <label for="unselected2" class="ng-toggle-switch-label">unselected</label>'+
            '</div>',
        scope:{
            items:'=',
            selectedValue:'='
        },
        link: function(scope, element, attributes){
        }   
    }
}]);
})();

HTML

<my-toggle></my-toggle>

CSS

  .ng-toggle-switch {
      position: relative;
       width: 100%;
        border: 1px solid #0098F3;
        max-width: 323px;
        height: 34px;
        border-radius: 4px;
    }
    .ng-toggle-switch-label {
        float: left;
        text-align: center;
        cursor: pointer;
        padding-left: 16px !important;
        line-height: 34px;
        border-right: 1px solid #0098F3;
        padding-right: 16px;
        color: #0098F3;
    }
    .ng-toggle-switch-label:last-child
    {
        border: none;
    }
    .ng-toggle-switch-input {
      display: none;
    }
    .ng-toggle-switch-input:checked + .ng-toggle-switch-label {
        background: #0098F3;
        color: #fff;
    }

What i have created is pretty much static. there will be only 3 buttons for now with their static values. I need to make it dynamic so that it can be used across various apps. here i need the person who is going to use this directive should be able to pass number of buttons needed and the value selected. any advise will be appreciated.

Thanks in advance.

Answer 1

You're almost there. You can use the items in your scope in your template. Just use ng-repeat to go through the items that you pass:

(() => {
  'use strict';

  angular.module('myApp', [])
    .controller('myController', ($scope) => {
      $scope.items = [{
        id: 1,
        label: 'low'
      }, {
        id: 2,
        label: 'medium'
      }, {
        id: 3,
        label: 'high'
      }, {
        id: 4,
        label: 'ultra'
      }];
    })
    .directive('myToggle', () => {
      return {
        restrict: 'E',
        template: '<div class="ng-toggle-switch">' +
          '<span ng-repeat="item in items">' +
          '<input type="radio" class="ng-toggle-switch-input" name="view" id="{{item.id}}">' +
          '<label for="{{item.id}}" class="ng-toggle-switch-label">{{item.label}}</label>' +
          '</span>' +
          '</div>',
        scope: {
          items: '=',
          selectedValue: '='
        },
        link: function(scope, element, attributes) {}
      }
    });
})();

Here's a fiddle.

Answer 2

Basic steps in to accomplish sending the data to the directive.

On your directive you already added the scope variable :

scope:{
    items:'=',
    selectedValue:'='
}

Send the data on the view

<my-toggle items="data"></my-toggle>

In the template of the directive you can loop the data

<div ng-repeat="item in items">{{item}}</div>