Javascript AngularJS-包括来自引导程序（如Metrouics）的日历

我想在我的项目中包括Metro Ui CSS中的日历：

但我不知道如何激活日历。 我已经在index.html（3个脚本）中包含了所有内容，我有一个带有calendar div的模板，但是我如何激活它呢

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

• 使用数据角色，没有结果
• 使用jquery:$（“组件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:无法读取未定义的属性“Locale”

---

为了使用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组件，其中包含一个

编辑

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

jquery.min.js

jquery.widget.min.js

-您可以在metro ui css存档中找到它，位于此位置

metro ui css master\docs\js\jquery/jquery.widget.min.js

metro.min.js

-我没有设法让它只使用日历中给定的文件

安格拉斯

包含指令的脚本

---

我在这里创建了一个plunker:

谢谢，这样更好，但是metro ui css有一个错误。TypeError:无法读取未定义的属性“Locale”。我放置了一个参数“locale”，但结果与示例相同。很奇怪，因为我也有同样的问题。看看我的编辑也许，你没有正确的metro.min.js版本。尝试查看他们网站上的最后一个。我不知道你是否用bower做了最后一个。我正在用一个简单的代码和另一个错误进行检查：TypeError:无法读取属性“days”of undefined at Well它在Plunker上使用完全相同的代码和库工作