2

我正在使用 Django、angularJS 和 lumx 创建网站。我对这个框架很陌生，我正在尝试让基本的 lumx 功能正常工作。我使用说明http://ui.lumapps.com/getting-started/installation安装了 lumx （使用“bower install lumx”）。Django 设置为正确处理静态文件。

我有我想要测试的 base.html 文件（应该只显示一个下拉框）：

{% load staticfiles %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <script src="{% static 'browse/js/script.js' %}"></script>
    <link rel="stylesheet" href="{% static 'browse/bower_components/lumx/dist/lumx.css' %}">

    <script src="{% static 'browse/bower_components/jquery/dist/jquery.js' %}"></script>
    <script src="{% static 'browse/bower_components/velocity/velocity.js' %}"></script>
    <script src="{% static 'browse/bower_components/moment/min/moment-with-locales.js' %}"></script>
    <script src="{% static 'browse/bower_components/angular/angular.js' %}"></script>
    <script src="{% static 'browse/bower_components/lumx/dist/lumx.js' %}"></script>

</head>
<body>

    <lx-dropdown over-toggle="true">
        <button class="btn btn--m btn--black btn--flat" lx-ripple lx-dropdown-toggle>
            Dropdown toggle
        </button>

        <lx-dropdown-menu>
            <ul>
            <li><a class="dropdown-link" ng-click="dropdownAlert()">Notification</a></li>
            <li><a class="dropdown-link">Another action</a></li>
            <li><a class="dropdown-link">Another action</a></li>
            <li><a class="dropdown-link">Another action</a></li>
            <li><a class="dropdown-link">Something else here</a></li>
            <li class="dropdown-divider"></li>
            <li><span class="dropdown-link dropdown-link--is-header">Header</span></li>
            <li><a class="dropdown-link">Separated link</a></li>
            </ul>
        </lx-dropdown-menu>
    </lx-dropdown>
</body>

但是动画不起作用，我不确定出了什么问题。lumx 动画都不起作用（如按钮波纹），但我可以调用它们拥有的图标。服务器日志显示我所有的 css 和 js 文件都被调用了。

4

1 回答 1

0

我认为这是因为您没有正确初始化 Angular。你需要：

  • ngApp使用指令声明您的应用
  • 声明lumx为您的应用程序的依赖项（也许您在script.js？）
  • 确保在加载库angular 后调用。现在你script.js在加载所有库之前。

所以你的头部的固定版本可能是这样的：

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="{% static 'browse/bower_components/lumx/dist/lumx.css' %}">

    <script src="{% static 'browse/bower_components/jquery/dist/jquery.js' %}"></script>
    <script src="{% static 'browse/bower_components/velocity/velocity.js' %}"></script>
    <script src="{% static 'browse/bower_components/moment/min/moment-with-locales.js' %}"></script>
    <script src="{% static 'browse/bower_components/angular/angular.js' %}"></script>
    <script src="{% static 'browse/bower_components/lumx/dist/lumx.js' %}"></script>
    <script src="{% static 'browse/js/script.js' %}"></script>

</head>

有这样的东西script.js：

angular.module('myApp', ['lumx']);
于 2016-02-10T17:21:07.407 回答