base.html中的js未应用于在ui-view中加载的angular / materializecss模板

时间:2017-02-25 13:19:51

标签: angularjs django-templates materialize django-staticfiles

我有以下结构protect.htmlbase.html延伸,angularjs在ui-view中放置protect.html中的角度模板。 base.html包含所有jscss

现在我的问题是来自js的{​​{1}}未应用于base.html中加载的angular / materializecss模板。

我可以看到ui-view中加载的所有文件。

当我将这些developer tool个文件放入要加载到js的每个文件中时,一切正常。

问题似乎是,实现js没有应用于html或者在加载html元素之前加载

当我将物化js添加到已加载的页面时,一切正常。

任何帮助/指示都将不胜感激。

感谢。

base.html文件

ui-view

protect.html

{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

        {% block title %}
            <title>Raxak Protect</title>
        {% endblock title %}
        
        {% block basecss %}
            <link  href="{% static 'css/base.css' %}" type="text/css" rel="stylesheet" media="screen,projection">
        {% endblock basecss %}
    
        {% block css %}
        {% endblock css %}

</head>
        {% block header %}
        {% endblock header %}

<body id="login-page">

	{% block navigation %}
   		{% endblock navigation %}
   		{% block content %}
   		{% endblock content %}
   		{% block footer %}
   		{% endblock footer %}

</body>

    {% block basejs %}

        <script type = "text/javascript" src = "{% static 'js/jquery-1.11.2.min.js' %}"></script>
        <script src = "{% static 'jquery/jquery-ui.js' %}"></script>
        <script src = "{% static 'angular/angular.js' %}"></script>
        <script src = "{% static 'angular/angular-ui-router.js' %}"></script>
        <script type = "text/javascript" src = "{% static 'js/materialize.js' %}"></script>
        
        <script src = "{% static 'angular/angular-materialize.js' %}"></script>
        <script src = "{% static 'angular/underscore.js'%}"></script>
        <script src = "{% static 'angular/angular-route.js' %}"></script>
        <script src = "{% static 'angular/restangular.js' %}"></script>
        <script type = "text/javascript" src = "{% static 'js/perfect-scrollbar.min.js' %}"></script>
        
        <script type="text/javascript" src="{% static 'js/jquery.dataTables.js' %}"></script>
        <script type="text/javascript" src="{% static 'js/dataTables.material.js' %}"></script>

        <!-- <script type="text/javascript" src = "{% static 'js/custom-script.js' %}"></script> -->
        <script type="text/javascript" src = "{% static 'datejs/moment.js' %}"></script>
        <script type="text/javascript" src = "{% static 'js/csrf.js' %}" ></script>
    {% endblock basejs %}

    {% block js %}
    {% endblock js %}
</html>

1 个答案:

答案 0 :(得分:0)

似乎在html内容之前加载了materialize js。

尝试将调用materialize js的<script>标记添加到最后一个。

&#13;
&#13;
<script type = "text/javascript" src = "{% static 'js/jquery-1.11.2.min.js' %}"></script>
        <script src = "{% static 'jquery/jquery-ui.js' %}"></script>
        <script src = "{% static 'angular/angular.js' %}"></script>
        <script src = "{% static 'angular/angular-ui-router.js' %}"></script>
         
        <script src = "{% static 'angular/underscore.js'%}"></script>
        <script src = "{% static 'angular/angular-route.js' %}"></script>
        <script src = "{% static 'angular/restangular.js' %}"></script>
        <script type = "text/javascript" src = "{% static 'js/perfect-scrollbar.min.js' %}"></script>
        
        <script type="text/javascript" src="{% static 'js/jquery.dataTables.js' %}"></script>
        <script type="text/javascript" src="{% static 'js/dataTables.material.js' %}"></script>

        <!-- <script type="text/javascript" src = "{% static 'js/custom-script.js' %}"></script> -->
        <script type="text/javascript" src = "{% static 'datejs/moment.js' %}"></script>
        <script type="text/javascript" src = "{% static 'js/csrf.js' %}" ></script>



<script type = "text/javascript" src = "{% static 'js/materialize.js' %}"></script>
        
        <script src = "{% static 'angular/angular-materialize.js' %}"></script>
&#13;
&#13;
&#13;

上述情况可能会以50%的概率解决您的问题。

否则,请在加载html内容后尝试在回调函数中调用materialize js。
没有JS代码很难提供示例