CODEWITHSUNDEEP
javascriptangularjs
mikeb
mikeb

Reputation: 11265

Angular 1.5 directive boolean value not passed into scope

I have a directive:

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

var HelloDirective = function() {
  return {
    scope: {
      list: "=",
      showValue: "="
    }, // use a new isolated scope
    restrict: 'AE',
    replace: false,
    template: '<h3>List value is {{list}}</h3><br/>Raw value is [{{showValue}}] <br/><br/>showValue value is: <span ng-show="showValue">True</span><span ng-hide="showValue">False</span>'

  };
}

myApp.directive("helloDirective", HelloDirective);

myApp.controller('MyCtrl', function($scope) {
  $scope.name = 'Angular Directive';
  $scope.osList = "Original value";
  $scope.bv = true;
})

Here is my HTML:

<div ng-controller="MyCtrl">
  Hello, {{name}}!  Value is {{bv}}
  <p list="osList" showValue="bv" class="" hello-directive></p>
  </div>

Here is the output:

Hello, Angular Directive! Value is true

List value is Original value

Raw value is []

showValue value is: False

oList displays properly but showValue does not pass the boolean properly, what's wrong? See this fiddle:

https://jsfiddle.net/mbaranski/guq2qyuc/12/

Upvotes: 2

Views: 125

Answers (2)

Pankaj Parkar
Pankaj Parkar

Reputation: 136134

You should have attribute name in kebab case(hyphen separated case).

That would be taken care by directive Normalization process to make it camelCase while mapping to isolated scope properties.

showValue="bv"

should be

show-value="bv"

Fiddle

Upvotes: 2

Alon Eitan
Alon Eitan

Reputation: 12025

It (the attribute) should be show-value="bv" and not showValue="bv"

Upvotes: 2

Related Questions