AngularJS -包括引导类MetroUiCSS中的日历

Question

我想在我的项目中包含一个来自Metro Ui：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:无法读取lib/bower/metro-ui-css/min/metro.min.js:16:321处未定义的属性“Locale”

Answer 1

为了使用Metro，您必须使用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组件--其中有一个数据采集器，并将其样式化。

编辑

我编辑了一些代码，让它有一个按钮来点击它来显示日历。另外，我已经解决了您的问题，在下面的顺序中包括：

1. jquery.min.js
2. jquery.widget.min.js -你可以在地铁用户界面css存档中找到它，在这个位置Metro-UI-CSS-master\docs\js\jquery/jquery.widget.min.js
3. metro.min.js -我没有设法让它只处理给出的日历文件
4. AngularJS
5. 带有指令的脚本

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