Question

我正在尝试使用指令将jQuery控件（http://amsul.ca/pickadate.js/）集成到我的角度应用程序中，但是在我的指令中我有一个独立的范围，但对象类型属性总是未定义的。

这是一个演示问题的plunker - 在指令范围内未定义minDate和maxDate属性。

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="bootstrap@3.3.1" 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="jquery@2.1.3" 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="bootstrap@3.3.1" 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="angular.js@1.3.10" 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>

有人建议为什么会这样吗？

由于

Answer 1

Angular自动camel-case normalizes要与指令名称和范围属性匹配的元素属性。

当您的范围变量为minDate和maxDate时，属性名称应分别为min-date和max-date

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

Angularjs指令隔离了范围属性undefined

1 个答案: