Evaluate expression inside custom directive

Question

I have attached a parameter object to my $scope controller, which contains a series of keys: values. What I want to to is to loop trough each of them and display the parameter name and value, but before displaying the value I want to check if it's a boolean or number to decide the type of the <input> tag. I'm new to Angular.jsso I'm don't really know how to evaluate expression inside a directive. Here's a live example.

script.js

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

myApp.controller('MyController', function ($scope){

  $scope.name = "myObject";

  $scope.parameters = [
    {parm0: 45},
    {parm1: 4.9},
    {parm2: true},
    {parm3: false}
    ];
});

myApp.directive('myInputDirective', function () {
  return {
    restrict: 'E',
    replace: true,
    template: '<div></div>',
    link: function (scope, element, attrs) {
      if (typeof scope.current === "number") {
        element.append('<p>{{key}}</p><input type="range" value="{{value}}">');
      } else {
        element.append('<p>{{key}}</p><input type="checkbox" value="{{value}}">');
      }
    }
  }
});

index.html

<!DOCTYPE html>
<html ng-app='myApp'>
  <head>
    <script data-require="angular.js@1.5.6" data-semver="1.5.6" src="https://code.angularjs.org/1.5.6/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>
  <body>
    <div ng-controller="MyController">
      <h3>
          {{name}}
      </h3>
      <ul ng-repeat="(key, value) in parameters" ng-init="current = value">
        <my-input-directive></my-input-directive>
      </ul>
    </div>
  </body>
</html>

daan.desmedt · Accepted Answer · 2016-07-15T12:16:25.443

I've updated your code as following (to quickly show how to achieve according you're started method).

See updated Plunker

// Code goes here    
var myApp = angular.module('myApp', []);    
myApp.controller('MyController', function ($scope){

  $scope.name = "myObject";

  $scope.parameters = {
    parm0: 45,
    parm1: 4.9,
    parm2: true,
    parm3: false
  };
});

myApp.directive('myInputDirective', function () {
  return {
    restrict: 'E',
    scope: {
      current: '=',
      key: '='
    },
    replace: false,
    link: function (scope, element, attrs) {
      element.append('<p>' + scope.key + '</p>');
      if (typeof(current) === "number") {
        element.append('<input type="range" value="' + scope.current + '">' + scope.current + '</input>');
      } else {
        element.append('<input type="checkbox" value="' + scope.current + '">' + scope.current + '</input>');
      }
    },
    template: '<div></div>'
  }
});


<!DOCTYPE html>
<html ng-app='myApp'>

  <head>
    <script data-require="angular.js@1.5.6" data-semver="1.5.6" src="https://code.angularjs.org/1.5.6/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-controller="MyController">
      <h3>
          {{name}}
      </h3>
      <ul ng-repeat="(key, value) in parameters">
        <my-input-directive current="value" key="key"></my-input-directive>
      </ul>
    </div>
  </body>

</html>

Thanks, it is displaying keys and values, but the input type is wrong. They're all checkboxes — leota, Jul 15 '16 at 12:10
Plunker is updated, problem was that typeof(current) === "number" should of been typeof(scope.current) === "number" — daan.desmedt, Jul 15 '16 at 12:14

fantarama · Answer 2 · 2016-07-15T12:22:43.260

Isolate the scope and add a property:

Plunker edited

myApp.controller('MyController', function ($scope){

  $scope.name = "myObject";

  $scope.parameters = [45, 4.9, true, false];
});

myApp.directive('myInputDirective', function () {
  return {
    restrict: 'E',
    replace: true,
    scope: {
      myValue: "=",
      myKey: "="
    },
    template: '<div><p>{{myKey}}</p><input type="{{inputType}}" value="{{myValue}}"></div>',
    link: function (scope, element, attrs) {
      if (typeof scope.myValue === "number") {
        scope.inputType = "range";
      } else {
        scope.inputType = "checkbox";
      }
    }
  }
});

html:

<body>
    <div ng-controller="MyController">
      <h3>
          {{name}}
      </h3>
      <ul ng-repeat="(key, value) in parameters" ng-init="current = value">
        <my-input-directive my-value="value" my-key="key"></my-input-directive>
      </ul>
    </div>
  </body>

Tried what you suggested, but got the same results – leota Jul 15 '16 at 12:04 — leota, Jul 15 '16 at 12:04
Edited: use parameters as simple array and isolated scope – fantarama Jul 15 '16 at 12:23 — fantarama, Jul 15 '16 at 12:23

score 0 · Answer 3 · answered Jul 15 '16 at 12:25

Plunker: https://plnkr.co/edit/IaTjhMyvo8u9ixCHuXGT

I made some changes on your JS code:

// Code goes here

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

myApp.controller('MyController', function ($scope){

  $scope.name = "myObject";

  $scope.parameters = [
    {parm0: 45},
    {parm1: 4.9},
    {parm2: true},
    {parm3: false}
    ];
});

myApp.directive('myInputDirective', function () {
  return {
    restrict: 'E',
    replace: true,
    template: '<div></div>',
    link: function (scope, element, attrs) {
      var key = Object.keys(scope.current)[0];
      var value = scope.current[key];

      if (typeof value === "number") {
        element.append('<p>' + key + '</p><input type="range" value="' + value + '">');
      } else {
        var checked = value ? ' checked' : '';
        element.append('<p>' + key + '</p><input type="checkbox" ' + checked + '>');
      }
    }
  }
});

score 0 · Answer 4 · answered Jul 15 '16 at 12:29

Cleaner way of doing the same thing:

myApp.directive('myInputDirective', function () {
  return {
    restrict: 'E',
    scope: {
      current: '=',
      key: '='
    },
    replace: false,
    link: function (scope, element, attrs) {
      if (typeof(scope.current) === "number")
        scope.type = "range";
      else
        scope.type = "checkbox";
    },
  template: '<div><p>{{key}}</p><input type="{{type}}" value="value">{{current}}</input></div>'
  }
});

updated plunkr:

https://plnkr.co/edit/KazghuS90ZYVoDWsiEld?p=preview

Evaluate expression inside custom directive

4 Answers4

Linked