0

加載角/ materializecss模板我有下面的結構,其中從protect.html延伸base.html和angularjs載荷放置在protect.htmlui-view角模板。 base.html包含全部jscssJS不獲取應用到UI視圖

現在我的問題是js from base.html沒有得到適用於加載在ui-view中的angular/materializecss模板。

我可以看到在developer tool中加載的所有文件。

當我把這些js文件加載到每個文件中ui-view一切工作正常。

的問題似乎是,兌現JS不獲取應用到HTML或HTML元素加載

之前,當我添加兌現JS來加載網頁一切正常,它加載。

任何幫助/指針將不勝感激。

謝謝。

base.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"> 
 

 
\t {% block navigation %} 
 
    \t \t {% endblock navigation %} 
 
    \t \t {% block content %} 
 
    \t \t {% endblock content %} 
 
    \t \t {% block footer %} 
 
    \t \t {% 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>

protect.html

{% extends 'base.html' %} 
 
{% load staticfiles %} 
 

 
{% block title %} 
 
<title>Raxak Protect</title> 
 
{% endblock title %} 
 

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

 
{% block header %} 
 
{% include 'protect/header.html' %} 
 
{% endblock header %} 
 

 
{% block navigation %} 
 
<div id="container" ng-app="raxak_protect" ng-init="auth.user={{ user.cpeUser.id }}; auth.username ='{{ user.username }}'"> 
 
    {% include 'protect/protect_navigation.html' %} 
 
    {% block content %} 
 
    {% endblock content %} 
 
    <div ui-view=""> 
 
    </div> 
 
</div> 
 
{% endblock navigation %} 
 

 
{% block footer %} 
 
{% include 'protect/footer.html' %} 
 
{% endblock footer %} 
 

 
{% block js %} 
 

 
<script type="text/javascript" src="{% static 'js/raxak_protect.js' %}"></script> 
 

 
<script type="text/javascript" src="{% static 'js/controllers.js' %}"></script> 
 

 
<script type="text/javascript" src="{% static 'js/b_controllers.js' %}"></script> 
 

 
</script> 
 
{% endblock js %}

+0

這是類似問題[這裏SO(http://stackoverflow.com/questions/27538175/javascript-cant-run-with-dynamic-views-loaded -from-ui-router),但不是乾淨的解決方案。 –

回答

0

似乎物化js在html內容之前加載。

嘗試添加調用物化js到最後的<script>標記。

<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>

上面可以解決以50%的概率的問題。

否則,加載html內容後,嘗試在回調函數中調用js實現。
很難提供一個例子沒有你的JS代碼