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

Posted 2023-02-24

技术标签:

【中文标题】base.html 中的 js 未应用于 ui-view 中加载的 angular/materializecss 模板【英文标题】：js from base.html is not getting applied to angular/materializecss templates loaded in ui-view 【发布时间】：2017-07-16 08:16:36 【问题描述】：

我有以下结构，其中protect.html 从base.html 扩展，angularjs 在ui-view 中加载角度模板，放在protect.html 中。 base.html 包含所有 js 和 css。

现在我的问题是来自base.html 的js 没有应用于ui-view 中加载的角度/materializecss 模板。

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

当我将这些 js 文件放入要加载到 ui-view 的每个文件中时，一切正常。

问题似乎是，materialize 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">

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

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 %

【问题讨论】：

这是类似的问题here on SO，但不是干净的解决方案。 【参考方案1】：

好像materialize js是在html内容之前加载的。

尝试将调用materialize 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内容后，尝试在回调函数中调用materialize js。 没有你的JS代码很难提供示例

【讨论】：

以上是关于base.html 中的 js 未应用于 ui-view 中加载的 angular/materializecss 模板的主要内容，如果未能解决你的问题，请参考以下文章

在 js 文件中未检测到 Django url 模式

无法加载 Django 模板

子页面扩展 base.html.twig 但未呈现 base.html.twig 的内容

Django 教程第 2 部分模板——base_site.html 更改未反映

NSLAyoutConstraints 未应用于 UICollectionViewCell 中的 UIView

列表中的 Vue.js 组件未应用