• 0

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

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

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 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
 

 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

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

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن