AngularJS - 包括来自类似引导的 MetroUiCSS 的日历

Question

我想在我的项目中包含一个来自 Metro Ui CSS 的日历：http://metroui.org.ua/calendar.html

但我不知道如何激活日历。 我已将所有内容都包含在 index.html（3 个脚本）中，我有一个带有日历 div 的模板，但我该如何激活？

在上面的链接中，有两种激活方式：

• 有数据角色，没有结果
• 使用 jquery : $("component_id").calendar();我不知道如何用 AngularJS 做到这一点

有人有想法吗？

谢谢

编辑：

这里是 index.html 中的包含

<script type="text/javascript" src="_lib/bower/metro-ui-css/docs/js/jquery/jquery.min.js"></script>
<script type="text/javascript" src="_lib/bower/metro-ui-css/docs/js/jquery/jquery.widget.min.js"></script>

<script type="text/javascript" src="_lib/bower/metro-ui-css/min/metro.min.js"></script>
<script type="text/javascript" src="_lib/bower/angular/angular.js"></script>
<script type="text/javascript" src="_lib/bower/angular-route/angular-route.js">    </script>
<script type="text/javascript" src="_lib/bower/angular-resource/angular-resource.js"></script>

<script src="app.js"></script>
<script src="common/CalendarDirective.js"></script>
...

还有错误

TypeError：无法读取未定义的属性“区域设置” 在http://cloud.localhost.com/app/_lib/bower/metro-ui-css/min/metro.min.js:16:321

Answer 1

要使用 Metro Ui CSS，您必须使用 jQuery。因此，您还应该在脚本中包含 jQuery。

为了让它与 AngularJS 一起工作，使用这样的指令：

app.directive('calendar', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
        element.calendar();
    }
  };
);

它将显示您的日历。此外，您可以在指令中添加一个控制器以仅在您单击元素时显示它：

app.directive('calendar', function() {
  return {
    restrict: 'A',
    controller : function($scope, $element) {
        $scope.openCalendar = function(){
            $element.calendar();
        }
    },
    link: function(scope, element, attrs, controller) {
    }
  };
});

还有html代码：

<div class="calendar" calendar>
  <button ng-click="openCalendar()">open</button>
</div>

希望这项工作。

作为替代解决方案，您可以使用 AngularUI 组件，其中有一个 datepicker 并设置它的样式。

编辑

我对代码进行了一些编辑，以便有一个按钮可以单击它以显示日历。另外，我已通过包含以下顺序解决了您的问题：

1. jquery.min.js
2. jquery.widget.min.js - 你可以在这个位置的metro ui css档案中找到它Metro-UI-CSS-master\docs\js\jquery/jquery.widget.min.js
3. metro.min.js - 我没有设法仅使用为日历提供的文件来使其工作
4. AngularJS
5. 带有指令的脚本

我在这里创建了一个 plunker：http://plnkr.co/edit/oapSiyeIYCAYlpqAMAlt?p=preview