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.

dork · Accepted Answer · 2016-07-20 07:23:02Z

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.

daan.desmedt · Accepted Answer · 2016-07-20 07:00:08Z

0

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>

answered Jul 20, 2016 at 7:00

daan.desmedt

3,8201 gold badge22 silver badges33 bronze badges

Collectives™ on Stack Overflow

Passing values to custom directive in angular js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related