Question

我正在使用Django，angularJS和lumx来创建一个网站。我是这个框架的新手，我正在尝试使用基本的lumx功能。我使用说明http://ui.lumapps.com/getting-started/installation安装了lumx（使用＆＃34; bower install lumx＆＃34;）。 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文件都被调用。

Answer 1

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

使用try/catch指令
将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

Lumx动画无效

1 个答案: