CODEWITHSUNDEEP
angularjsangularjs-directive
weagle08
weagle08

Reputation: 1964

Angularjs directive isolated scope properties undefined

I am trying to integrate a jQuery control (http://amsul.ca/pickadate.js/) into my angular app using a directive, however within my directive I have an isolated scope but the object type properties are always undefined.

Here is a plunker demonstrating the problem - the minDate and maxDate properties are undefined in the directive scope.

http://plnkr.co/edit/yeYxWy?p=preview

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

app.controller('default', function($scope) {
  $scope.minDate = new Date();
  $scope.minDate.addDays(-5);
  $scope.maxDate = new Date();
  $scope.maxDate.addDays(5);
  $scope.format = 'mm/dd/yyyy';
  
  $scope.date = new Date();
  $scope.date.addDays(-2);
  
  
  $scope.onGetDate = function(){
    alert($scope.date);
  };
});


app.directive('amsulPickadate', function(){
  return {
        restrict: 'E',
        template: '<input id="datepicker" class="form-control" type="text" ng-model="ngModel" value="ngModel">',
        scope: {
          ngModel: '=',
          minDate: '=',
          maxDate: '=',
          format: '@'
        },
        link: function(scope){
            var pkr = $('#datepicker').pickadate({
              select: scope.ngModel,
              minDate: scope.minDate,
              maxDate: scope.maxDate,
              format: scope.format,
              container: '#pickadateContainer'
            });
        }
    };
});
<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link data-require="[email protected]" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <link data-require="pickadate.js@*" data-semver="3.3.0" rel="stylesheet" href="https://rawgithub.com/amsul/pickadate.js/cab638a5cbf6d7b959096ed346d9216370cfb543/lib/themes/default.css" />
    <link data-require="pickadate.js@*" data-semver="3.3.0" rel="stylesheet" href="https://rawgithub.com/amsul/pickadate.js/cab638a5cbf6d7b959096ed346d9216370cfb543/lib/themes/default.date.css" />
    <link data-require="pickadate.js@*" data-semver="3.3.0" rel="stylesheet" href="https://rawgithub.com/amsul/pickadate.js/cab638a5cbf6d7b959096ed346d9216370cfb543/lib/themes/default.time.css" />
    
  </head>

  <body ng-controller="default">
  <div style="margin: 100px;">
    <amsul-pickadate ng-model="date"
                    minDate="minDate"
                    maxDate="maxDate"
                    format="{{format}}"></amsul-pickadate>
    <div id="pickadateContainer"></div>
  </div>
  <div>
    <button class="btn btn-primary" ng-click="onGetDate()">Get Date!</button>
  </div>
    
    <script data-require="[email protected]" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script data-require="datejs@*" data-semver="0.1.0" src="//cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js"></script>
    <script data-require="[email protected]" data-semver="3.3.1" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <script data-require="pickadate.js@*" data-semver="3.3.0" src="https://rawgithub.com/amsul/pickadate.js/cab638a5cbf6d7b959096ed346d9216370cfb543/lib/picker.js"></script>
    <script data-require="pickadate.js@*" data-semver="3.3.0" src="https://rawgithub.com/amsul/pickadate.js/cab638a5cbf6d7b959096ed346d9216370cfb543/lib/picker.date.js"></script>
    <script data-require="pickadate.js@*" data-semver="3.3.0" src="https://rawgithub.com/amsul/pickadate.js/cab638a5cbf6d7b959096ed346d9216370cfb543/lib/picker.time.js"></script>
    <script data-require="[email protected]" data-semver="1.3.10" src="https://code.angularjs.org/1.3.10/angular.js"></script>
    <script src="app.js"></script>
    <script src="amsulPickadate.js"></script>
  </body>

</html>

Anyone have suggestions as to why this is happening?

Thanks

Upvotes: 0

Views: 759

Answers (1)

New Dev
New Dev

Reputation: 49580

Angular automatically camel-case normalizes the element attributes to match against a directive name and scope properties.

When your scope variable are minDate and maxDate, the attribute names should be respectively min-date and max-date

<amsul-pickadate ng-model="date"
                 min-date="minDate"
                 max-date="maxDate"
                 format="{{format}}"></amsul-pickadate>

Upvotes: 2

Related Questions