Question

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

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

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

有数据角色，没有结果
with jquery：$（＆＃34; component_id＆＃34;）。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：无法读取属性＆＃39; Locale＆＃39;未定义的在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并为其设置样式。

修改

我已编辑了一些代码，只需点击一下按钮即可显示日历。此外，我已按照以下顺序解决了您的问题：

jquery.min.js

jquery.widget.min.js - 您可以在此地点的地铁ui css存档中找到它Metro-UI-CSS-master\docs\js\jquery/jquery.widget.min.js

metro.min.js - 我没有设法只使用为日历提供的文件

AngularJS

带有指令的脚本

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

AngularJS - 包括类似Bootstrap的MetroUiCSS的日历

1 个答案: