مشكلة الـ view لا تعمل عند عمل route لها في الجافاسكربت؟

Hesham Shawky · 29 أبريل 2016

السلام عليكم ورحمة الله
كم هو في العنوان عندما نعمل route ل view معين في الجافاسكربت لا تعمل على هذا الـ view نهائيا

سعيد · 30 أبريل 2016

ماهو "الأنجلر"؟

عبدالهادي الديوري · 30 أبريل 2016

وعليكم السّلام ورحمة الله وبركاته.

أعتقد بأنّك تقصد AngularJS. أليس كذلك؟

هلّا عدّلت سؤالك مع تضمين الشّيفرة المسؤولة عن المُشكلة لو سمحت؟

قد تكون المُشكلة في عدم تحديد مُتحكّم Controller للموجّه route.

Hesham Shawky · 30 أبريل 2016

شكراا ع الرد نعم أقصد angularJs
اخي الroute يعمل جيداا ولكن اي كود js أخر أريدة ان يؤثر ع element معين لايعمل... اذا كان هذا الelement داخل view

app.config(function ($routeProvider, $locationProvider) {
    "use strict";
    $routeProvider
        .when('/', {
            controller: 'HomeCtrl',
            templateUrl: 'app/views/home.html'
        })
        .when('/resume', {
            controller: 'ResumeCtrl',
            templateUrl: 'app/views/resume.html'
        })
        .otherwise({redirectTo: '/'});

});

*ملحوظة انا أدرج ملفات الجافاسكربت في index

تم التعديل في 30 أبريل 2016 بواسطة Hesham Shawky

سعيد · 30 أبريل 2016

هل من الممكن أن تزودنا بالكود الذي تستخدمه والذي لا يؤثّر على ال element المعيّن. وهل هناك رسالة خطأ (اضغط F12 واتجه إلى اللسان Console).

أرجو أن تزودنا بمعلومات تفصيلية قدر المستطاع، مع ذكر إصدار AngularJS الذي تستخدمه. ومن الأفضل أن تدرج ملفات الكود ذات الصلة إذا كان ذلك بالإمكان.

Hesham Shawky · 30 أبريل 2016

لا مشكلة اخي هذاا ال index.html

<!DOCTYPE html>
<html lang="en" data-ng-app="photoGraphyApp">
<head>
    <!-- meta tags -->
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- meta tags -->

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- title -->
    <title>Hesham Shawky</title>
    <!-- title -->


    <!-- syles -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/responsive.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

    <!-- Color theme -->
    <link rel="stylesheet" href="assets/css/color-theme/red-theme.css">
    <!-- syles -->

</head>
<body>
    <!-- Start All Site -->
    <div class="all">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-1">

                    <aside class="navi">
                        <ul>
                            <li><a href="#/"><i class="fa fa-user"></i></a></li>
                            <li><a href="#/resume"><i class="fa fa-file"></i></a></li>
                            <li><a href="#/portfolio"><i class="fa fa-paint-brush"></i></a></li>
                            <li><a href="#/testimonial"><i class="fa fa-quote-left"></i><i class="fa fa-quote-right"></i></a></li>
                            <li><a href="#contact"><i class="fa fa-envelope"></i></a></li>
                        </ul>
                    </aside>

                </div>

                <div class="col-sm-11">
                    <ng-view></ng-view>
                </div>
            </div>
        </div>
    </div>


    <!-- End All Site -->

    <!-- JavaScript Files -->

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="assets/js/jquery-1.11.3.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="assets/js/bootstrap.min.js"></script>

    <!-- AngularJs -->
    <script src="assets/js/angular.min.js"></script>

    <!-- AngularJs Route lib -->
    <script src="assets/js/angular-route.min.js"></script>

    <!-- photoGraphyApp -->
    <script src="app/app.js"></script>

    <!-- Custom routing Js file -->
    <script src="app/routing/route.js"></script>

    <!-- Custom JS File -->
    <script src="assets/js/script.js"></script>

    <script src="app/controllers/test.js"></script>

    <!-- JavaScript Files -->
</body>
</html>

وهذا الroute

var app = angular.module('photoGraphyApp', ['ngRoute']);
app.config(function ($routeProvider, $locationProvider) {
    "use strict";
    $routeProvider
        .when('/', {
            controller: 'HomeCtrl',
            templateUrl: 'app/views/home.html'
        })
        .when('/resume', {
            controller: 'ResumeCtrl',
            templateUrl: 'app/views/resume.html'
        })
        .otherwise({redirectTo: '/'});

});

وهذاا ملف ال view الي بعملو route...... اي كود جافاسكربت اريدة ان يوثر في هذاا الview لايعمل

<!-- Resume section Start -->
<section class="resume" id="resume" data-ng-controller="ResumeCtrl">
    <!-- Section title -->
    <h2 class="title">
        <i class="fa fa-file"></i><br>
        resume
    </h2>
    <!-- Quotation -->
    <h3 class="text-center">
       who makes no mistakes makes nothing.
    </h3>

    <!-- Resume (Emmplo&Educ) -->
    <div class="exper-edu">
        <div class="col-sm-7">

            <!-- Employment start -->
            <h3><i class="fa fa-suitcase"></i>Employment</h3>
            <ul class="timeline">
                <li>
                    <div class="timeline-badge info"><i class="fa fa-suitcase"></i></div>
                    <div class="timeline-panel">
                        <div class="timeline-heading">
                            <h4 class="timeline-title">Full Stack Developer <span>|</span> RootCave</h4>
                            <h5>February 2016 - Present</h5>
                        </div>
                        <div class="timeline-body">
                            <p>Lorem ipsum dolor sit amet, virtute feugiat in est. Et viris quodsi reprehendunt nec, sensibus intellegat dissentias at nec. Mei et electram partiendo, et cum esse reprimique.</p>
                        </div>
                    </div>
                </li>

                <li>
                    <div class="timeline-badge info"><i class="fa fa-suitcase"></i></div>
                    <div class="timeline-panel">
                        <div class="timeline-heading">
                            <h4 class="timeline-title">Front End Developer <span>|</span> ingraph.me</h4>
                            <h5>October 2015 - January 2016</h5>
                        </div>
                        <div class="timeline-body">
                            <p>Lorem ipsum dolor sit amet, virtute feugiat in est. Et viris quodsi reprehendunt nec, sensibus intellegat dissentias at nec. Mei et electram partiendo, et cum esse reprimique.</p>
                        </div>
                    </div>
                </li>
            </ul>
            <!-- Employment end -->

            <!-- Education start -->
            <h3><i class="fa fa-book"></i>Education</h3>
            <ul class="timeline">
                <li>
                    <div class="timeline-badge info"><i class="fa fa-book"></i></div>
                    <div class="timeline-panel">
                        <div class="timeline-heading">
                            <h4 class="timeline-title">Factually Of Commerce <span>|</span> Cairo University</h4>
                            <h5>2012 - 2017(expected)</h5>
                        </div>
                        <div class="timeline-body">
                            <p>Lorem ipsum dolor sit amet, virtute feugiat in est. Et viris quodsi reprehendunt nec, sensibus intellegat dissentias at nec. Mei et electram partiendo, et cum esse reprimique.</p>
                        </div>
                    </div>
                </li>

                <li>
                    <div class="timeline-badge info"><i class="fa fa-book"></i></div>
                    <div class="timeline-panel">
                        <div class="timeline-heading">
                            <h4 class="timeline-title">Web Programing <span>|</span> Self Learning</h4>
                            <h5>2009 - Present</h5>
                        </div>
                        <div class="timeline-body">
                            <p>Lorem ipsum dolor sit amet, virtute feugiat in est. Et viris quodsi reprehendunt nec, sensibus intellegat dissentias at nec. Mei et electram partiendo, et cum esse reprimique.</p>
                        </div>
                    </div>
                </li>

                <li>
                    <div class="timeline-badge info"><i class="fa fa-book"></i></div>
                    <div class="timeline-panel">
                        <div class="timeline-heading">
                            <h4 class="timeline-title">SoftWare Engineer <span>|</span> OXFord University</h4>
                            <h5>2013 - 2018(expected)</h5>
                        </div>
                        <div class="timeline-body">
                            <p>Lorem ipsum dolor sit amet, virtute feugiat in est. Et viris quodsi reprehendunt nec, sensibus intellegat dissentias at nec. Mei et electram partiendo, et cum esse reprimique.</p>
                        </div>
                    </div>
                </li>
            </ul>
            <!-- Education End -->
        </div>

        <!-- Skills Rating -->
        <div class="col-sm-5">
            <aside class="resume-aside">
                <!-- Skills -->
                <h3><i class="fa fa-star"></i>Skills</h3>
                <ul class="skills">
                    <li>
                        <h4><i class="fa fa-dot-circle-o"></i>Photoshop</h4>
                        <div class="rating" data-rat="4"></div>

                    </li>
                    <li>
                        <h4><i class="fa  fa-dot-circle-o"></i>Indesign</h4>
                        <div class="rating" data-rat="6"></div>
                    </li>
                    <li>
                        <h4><i class="fa  fa-dot-circle-o"></i>Illustrator</h4>
                        <div class="rating" data-rat="5"></div>
                    </li>
                    <li>
                        <h4><i class="fa  fa-dot-circle-o"></i>Flash</h4>
                        <div class="rating" data-rat="3"></div>
                    </li>
                    <li>
                        <h4><i class="fa  fa-dot-circle-o"></i>Corel Draw</h4>
                        <div class="rating" data-rat="5"></div>
                    </li>
                    <li>
                        <h4><i class="fa  fa-dot-circle-o"></i>Cinema4D</h4>
                        <div class="rating" data-rat="4"></div>
                    </li>
                </ul>

                <!-- hobbies -->
                <h3><i class="fa fa-star"></i>Hobbies</h3>
                <ul class="hobbies">
                    <li><img class="img-responsive" src="assets/images/hobbies/1.png" alt="..."></li>
                    <li><img class="img-responsive" src="assets/images/hobbies/2.png" alt="..."></li>
                    <li><img class="img-responsive" src="assets/images/hobbies/3.png" alt="..."></li>
                    <li><img class="img-responsive" src="assets/images/hobbies/4.png" alt="..."></li>
                    <li><img class="img-responsive" src="assets/images/hobbies/5.png" alt="..."></li>
                    <li><img class="img-responsive" src="assets/images/hobbies/6.png" alt="..."></li>
                </ul>

                <!-- Download Resume -->
                <a href="#" class="btn black">Download Resume</a>
            </aside>

        </div>
    </div>
</section>
<!-- Resume section End -->

وهذا ملف script.js

$(".skills li .rating").each(function (index, e) {

        // Vars
        var
            $ratNum = 7,
            $rat = $(e).attr("data-rat"),
            $point = "<span></span>";

        // Append points
        while ($ratNum > 0) {
            $(e).append($point);
            $ratNum--;
        }

        $(e).find("span").each(function (index, e) {
            if (index >= $rat)
            return false;
            // Append Disabled Rats
            $(e).animate({
                opacity: 1
            });
        });

    });

استخدم angularJs أصدار 1.5 لا توجد أي اخطاء js في الconsole
ملحوظة الجافاسكربت تعمل في حالة ان كان الelement داخل الindex أي خارج الview

عبدالهادي الديوري · 30 أبريل 2016

أين المُتحكّمان HomeCtrl و ResumeCtrl

أعتقد بأنّ هذا ما ينقصك.

أضف المُتحكمات إلى تطبيقك.

app.controller('HomeCtrl',function($scope){

});
app.controller('ResumeCtrl',function($scope){

});

ضعها تحت الـRoute

تم التعديل في 30 أبريل 2016 بواسطة عبدالهادي الديوري

Hesham Shawky · 30 أبريل 2016

شكراا اخي لكن بعد وضع المتحكماات اريد تركيب plugin وليكن gallery داخل ال view اين اضع سكربت الخاص بتلك plugin

عبدالهادي الديوري · 30 أبريل 2016

إليك هذا الفيديو الذي يشرح كيفيّة وضع إضافة Chosen داخل تطبيق AngularJS.

مشكلة الـ view لا تعمل عند عمل route لها في الجافاسكربت؟

السؤال

Hesham Shawky

8 أجوبة على هذا السؤال

Recommended Posts

سعيد

عبدالهادي الديوري

Hesham Shawky

سعيد

Hesham Shawky

عبدالهادي الديوري

Hesham Shawky

عبدالهادي الديوري

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية