اذهب إلى المحتوى
  • 0

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

Hesham Shawky

السؤال

Recommended Posts

  • 2

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

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

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

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

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

});

ضعها تحت الـRoute

 

تم التعديل في بواسطة عبدالهادي الديوري
رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

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

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

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

شكراا ع الرد نعم أقصد 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
 

تم التعديل في بواسطة Hesham Shawky
رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

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

 

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

لا مشكلة اخي هذاا ال 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
 

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...