文章/答案/技术大牛

发布

问Lumx动画无法工作
EN

Stack Overflow用户

提问于 2016-02-07 06:45:00

回答 1查看 224关注 0票数 2

我正在使用Django，angularJS和lumx创建一个网站。我对这个框架非常陌生，我正在努力使基本的lumx功能工作起来。我使用http://ui.lumapps.com/getting-started/installation指令(使用"bower“)安装了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>

但是动画不工作，我不知道什么是错的。没有任何的朗姆克斯动画工作(如按钮纹章)，但我可以调用他们的图标。服务器日志显示我所有的css和js文件正在被调用。

django

lumx

javascript

css

angularjs

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-02-10 17:21:07

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

使用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']);

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/35250586

复制

相似问题

问Lumx动画无法工作
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Lumx动画无法工作EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Lumx动画无法工作
EN