SUJEET KR SINGH Ответов: 0

Как конвертировать шаблон администратора в angular js admin templates

Я хочу скачать шаблон администратора и хочу преобразовать его в Angular JS.

Но когда я преобразовал, то меню боковой панели не открывается при щелчке мыши, а также функция jquery hide/show и другие функции не работают.

Я пытался много раз , но безуспешно.

Нужно решение...

Пример бокового меню HTML::

<html lang="en">
<head>
<title>Matrix Admin</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="http://html.sujeetkumarsingh.com/html/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://html.sujeetkumarsingh.com/html/css/matrix-style.css" />
<link rel="stylesheet" href="http://html.sujeetkumarsingh.com/html/css/matrix-media.css" />

<script src="http://html.sujeetkumarsingh.com/html/js/jquery.min.js"></script>
<script src="js/matrix1.js"></script>
</head>
<body>

<!--sidebar-menu-->
<div id="sidebar">
  <ul>

    <li class="submenu"> <a href="#"> <span>Forms</span> <span class="label label-important">3</span></a>
      <ul>
        <li><a href="form-common.html">Basic Form</a></li>
        <li><a href="form-validation.html">Form with Validation</a></li>
        <li><a href="form-wizard.html">Form with Wizard</a></li>
      </ul>
    </li>
    <li class="submenu"> <a href="#"> <span>Addons</span> <span class="label label-important">5</span></a>
      <ul>
        <li><a href="index2.html">Dashboard2</a></li>
        <li><a href="gallery.html">Gallery</a></li>
        <li><a href="calendar.html">Calendar</a></li>
        <li><a href="invoice.html">Invoice</a></li>
        <li><a href="chat.html">Chat option</a></li>
      </ul>
    </li>
    <li class="submenu"> <a href="#"> <span>Error</span> <span class="label label-important">4</span></a>
      <ul>
        <li><a href="error403.html">Error 403</a></li>
        <li><a href="error404.html">Error 404</a></li>
        <li><a href="error405.html">Error 405</a></li>
        <li><a href="error500.html">Error 500</a></li>
      </ul>
    </li>
  </ul>
</div>

</body>
</html>



matrix1.js файл::

$(document).ready(function(){


    $('.submenu > a').click(function(e)
    {
        e.preventDefault();
        var submenu = $(this).siblings('ul');
        var li = $(this).parents('li');
        var submenus = $('#sidebar li.submenu ul');
        var submenus_parents = $('#sidebar li.submenu');
        if(li.hasClass('open'))
        {
            if(($(window).width() > 768) || ($(window).width() < 479)) {
                submenu.slideUp();
            } else {
                submenu.fadeOut(250);
            }
            li.removeClass('open');
        } else 
        {
            if(($(window).width() > 768) || ($(window).width() < 479)) {
                submenus.slideUp();         
                submenu.slideDown();
            } else {
                submenus.fadeOut(250);          
                submenu.fadeIn(250);
            }
            submenus_parents.removeClass('open');       
            li.addClass('open');    
        }
    });

    var ul = $('#sidebar > ul');

    $('#sidebar > a').click(function(e)
    {
        e.preventDefault();
        var sidebar = $('#sidebar');
        if(sidebar.hasClass('open'))
        {
            sidebar.removeClass('open');
            ul.slideUp(250);
        } else 
        {
            sidebar.addClass('open');
            ul.slideDown(250);
        }
    });


});



Below all code for angular related.

<pre><html lang="en" ng-app="myApp">
<head>
<title>Matrix Admin</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="http://html.sujeetkumarsingh.com/html/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://html.sujeetkumarsingh.com/html/css/matrix-style.css" />
<link rel="stylesheet" href="http://html.sujeetkumarsingh.com/html/css/matrix-media.css" />



<script src="http://html.sujeetkumarsingh.com/js/jquery.min.js"></script>
<script src="http://html.sujeetkumarsingh.com/js/angular.min.js"></script>
<script src="http://html.sujeetkumarsingh.com/js/angular-route.js"></script>
<script src="js/matrix1.js"></script>
<script src="app.js"></script>
</head>
<body>

    <div ng-include="'header.html'"></div>
    <div ng-view></div>

</body>
</html>


app.js File ::

var app = angular.module("myApp", ["ngRoute"]);
app.config(function ($routeProvider) {
    $routeProvider
    //.when("/", {
    //    templateUrl: "angular_index.html"
    //})
    .when("/chart", {
        templateUrl: "chart.html"
    })
    .when("/table", {
        templateUrl: "table.html"
    })
    .when("/chat", {
        templateUrl: "chat.html"
    });
});

header.html:::

<div id="sidebar">
    <ul>
        <li><a href="#!/chart"><span>Charts & graphs</span></a> </li>
        <li><a href="#!/chat"><span>Widgets</span></a> </li>
        <li><a href="#!/table"><span>Tables</span></a></li>
        <li class="submenu"><a href="#"><span>Forms</span> <span class="label label-important">3</span></a>
            <ul>
                <li><a href="form-common.html">Basic Form</a></li>
                <li><a href="form-validation.html">Form with Validation</a></li>
                <li><a href="form-wizard.html">Form with Wizard</a></li>
            </ul>
        </li>
        <li class="submenu"><a href="#"><span>Addons</span> <span class="label label-important">5</span></a>
            <ul>
                <li><a href="index2.html">Dashboard2</a></li>
                <li><a href="gallery.html">Gallery</a></li>
                <li><a href="calendar.html">Calendar</a></li>
                <li><a href="invoice.html">Invoice</a></li>
                <li><a href="chat.html">Chat option</a></li>
            </ul>
        </li>
        <li class="submenu"><a href="#"><span>Error</span> <span class="label label-important">4</span></a>
            <ul>
                <li><a href="error403.html">Error 403</a></li>
                <li><a href="error404.html">Error 404</a></li>
                <li><a href="error405.html">Error 405</a></li>
                <li><a href="error500.html">Error 500</a></li>
            </ul>
        </li>
    </ul>
</div>


chart.html

<div id="content">
  <div id="content-header">
    <div id="breadcrumb"> <a href="#" class="tip-bottom" data-original-title="Go to Home"> Home</a> <a href="#">Sample pages</a> <a href="#" class="current">Chat option</a> </div>
    <h1>Chat option</h1>
  </div>

</div>

chat.html

<div id="content">
  <div id="content-header">
    <div id="breadcrumb"> <a href="#" class="tip-bottom" data-original-title="Go to Home"> Home</a> <a href="#">Sample pages</a> <a href="#" class="current">Chat option</a> </div>
    <h1>Chat option</h1>
  </div>  
</div>


table.html

<div id="content">
  <div id="content-header">
    <div id="breadcrumb"> <a href="#" class="tip-bottom" data-original-title="Go to Home"> Home</a> <a href="#" class="current">Tables</a> </div>
    <h1>Tables</h1>
  </div>
</div>



Мой вопрос заключается в том, что выпадающее меню работает в html-образце и не работает в angular sample. Пока маршрут работает-это угловая выборка.

Что я уже пробовал:

Мой вопрос заключается в том, что выпадающее меню работает в html-образце и не работает в angular sample. Пока маршрут работает-это угловая выборка.

0 Ответов