Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

[Angular] Problem z wyświetlaniem się $scope w ng-view

Tworzenie dynamicznych stron internetowych z zastosowaniem JavaScript, jQuery, Ajax. Dowiedz się jak to zrobić, znajdź rozwiązania swoich problemów.

[Angular] Problem z wyświetlaniem się $scope w ng-view

Post 16.08.2015, 12:26:40

Hej,
nie wiem czemu, ale na pozostałych stronach wyświetlanie danych działa bez problemu, a tutaj nie wiedzieć czemu nie chce się wyświetlić... Może coś przeoczyłam? Dlatego prosiłabym o sprawdzenie czy jest dobry.

Kod widoku (html):
Kod: Zaznacz cały
<div id="page-wrapper" ng-controller="articleCreatePart1" >
    <form ng-submit="articleCreatePart1(article)" class="form-inline">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <br>
                <div class="flat-panel">
                    <div class="flat-panel-header">
                        <h2 class="page-header"><i class="fa fa-file-image-o"></i> Dodaj artykuł - część I</h2>
                    </div>
                </div>
            </div> 
        </div><!-- /.row -->

        <div class="row">
            <div class="col-md-12">
                <div class="flat-panel">
                    <div class="flat-panel-header">
                        <h3 class="page-header">Wybierz kolory podstawowe:</h3>
                    </div>
               
                    <div class="flat-panel-body">
                        <div class="row">
                            <div class="form-group col-md-4">
                                <p>Wybierz kolory podstawowe:</p>

                                <div style="width: 15%; margin-right: 10px; float: left; border-bottom: 10px solid #3498db;" >
                                    <label class="checkbox-inline">
                                        <input type="checkbox" ng-model="article.koloryPod.C" ng-init="checked=true" > C
                                    </label>
                                </div>

                                <div style="width: 15%; margin-right: 10px; float: left; border-bottom: 10px solid #E3256B;">
                                    <label class="checkbox-inline">
                                        <input type="checkbox"  ng-model="article.koloryPod.M" ng-init="checked=true" > M
                                    </label>
                                </div>

                                <div style="width: 15%; margin-right: 10px; float: left; border-bottom: 10px solid #f1c40f;">
                                    <label class="checkbox-inline">
                                        <input type="checkbox" ng-model="article.koloryPod.Y" ng-init="checked=true" > Y
                                    </label>
                                </div>

                                <div style="width: 15%; margin-right: 10px; float: left; border-bottom: 10px solid #000;">
                                    <label class="checkbox-inline">
                                        <input type="checkbox"  ng-model="article.koloryPod.K" ng-init="checked=true" > K
                                    </label>
                                </div>
                            </div>

                            <div class="form-group col-md-8" >
                                <p>Wybierz kolory podstawowe mieszane:</p>
                                <div style="width: 15%; margin-right: 15px; float: left; border-bottom: 10px solid #00a651;" ng-if="article.koloryPod.C && article.koloryPod.Y">
                                    <label class="checkbox-inline">
                                        <input type="checkbox"  ng-model="article.koloryMie.C_Y" > C+Y
                                    </label>
                                </div>

                                <div style="width: 15%; margin-right: 15px; float: left; border-bottom: 10px solid #f7941d; padding-left: 1px;" ng-if="article.koloryPod.M && article.koloryPod.Y">
                                    <label class="checkbox-inline">
                                        <input type="checkbox"  ng-model="article.koloryMie.M_Y" > M+Y
                                    </label>
                                </div>

                                <div style="width: 15%; margin-right: 15px; float: left; border-bottom: 10px solid #a154a1; padding-left: 1px;" ng-if="article.koloryPod.C && article.koloryPod.M">
                                    <label class="checkbox-inline" >
                                        <input type="checkbox"  ng-model="article.koloryMie.M_C" > M+C
                                    </label>
                                </div>

                                <div style="width: 15%; margin-right: 15px; float: left; border-bottom: 10px solid #ed1c24; padding-left: 1px;" ng-if="article.koloryPod.Y && article.koloryPod.M">
                                    <label class="checkbox-inline">
                                        <input type="checkbox"  ng-model="article.koloryMie.Y_M" > Y+M
                                    </label>
                                </div>

                                <div style="width: 15%; margin-right: 15px; float: left; border-bottom: 10px solid #f1f1ee; padding-left: 1px;">
                                    <label class="checkbox-inline">
                                        <input type="checkbox"  ng-model="article.koloryMie.B" > BIAŁY
                                     </label>
                                </div> 
                            </div> <!-- .form-group.col-md-8 -->
                        </div>   
                    </div> <!-- .flat-panel-body -->
                </div>
            </div>
        </div> <!-- /.row -->

        <div class="row">
            <div class="col-lg-12">
                <div class="flat-panel">
                    <div class="flat-panel-header">
                        <h3 class="page-header">Wybierz kolor pantonu</h3>
                    </div>
               
                    <div class="flat-panel-body">
                    <div class="row">
                        <div class="col-md-12" >
                            <div class="p-pantony" >
                                <label ng-repeat="panton in pantons" class="checkbox-inline" style="width: 100px; float: left; border-bottom: 10px solid rgb({{panton.R}}, {{panton.G}}, {{panton.B}} ) margin:0 10px 10px 0;">
                                    <!-- <input type="checkbox"  ng-model="article.pantonP" > x -->
                                    <input type="checkbox"  ng-true-value="true" ng-false-value="false" > {{panton.nazwa_pan}}
                                </label>
                            </div>
                        </div>
                    </div>   
                    </div> <!-- .flat-panel-body -->
                </div>
            </div>
        </div> <!-- /.row -->
       
        <div class="row">
                <div class="col-md-12">
                    <div class="flat-panel">                       
                        <div class="flat-panel-body">
                            <div class="row">
                                <div class="form-group col-md-4">
                                    <br>
                                    <a class="pull-left btn btn-warning" href="#/panton/create"><i class="fa fa-plus"></i> Dodaj nowy panton </a>
                                </div>
                                <div class="form-group col-md-8">
                                    <button type="submit" class="btn btn-success pull-right" style="margin: 20px 0 15px;"> Dalej <i class="fa fa-arrow-right"></i></button>
                                </div> 
                            </div>   
                        </div> <!-- .flat-panel-body -->
                    </div>
                </div>
            </div> <!-- /.row -->
        </div><!-- /.container-fluid -->
    </form>
</div><!-- /#page-wrapper -->


Controller (niepotrzebne controllery pominęłam)
Kod: Zaznacz cały
'use strict';
var pokayokaCtr = angular.module( 'pokayokaCtr' , [ 'ngRoute' ] );

pokayokaCtr.controller( 'articleCreatePart1' , [ '$scope' ,'$routeParams', 'pantonsLoader', function( $scope, $routeParams, pantonsLoader ){


   var drawingName = $routeParams.name_rys;
   $scope.name_rys = drawingName;

   pantonsLoader(function (data){
      $scope.pantons = data;
      console.log(data);
   });
    

   $scope.articleCreatePart1 = function (article) {


      $http.post('api/admin/articles/create' + drawingName, {
         article : article
      }).success(function(){

         $timeout(function(){
            $scope.success = false;

            $scope.article = {};
         } , 1500 );
         console.log($scope.article);

      }).error(function(){
         console.log('Error database connect!')
      });

   };

}]);

pokayokaCtr.factory('pantonsLoader', ['$http', function($http) {
   

   return function () {

      $http.get( 'api/admin/pantons/get' ).
      success( function( data ){
         $scope.pantons = data;
         console.log(data);
      }).error( function(){
         console.log( 'Błąd pobrania pliku z bazy danych! pantons' );
      });
   };
}])

Sprawdzałam breakpointy w debugerze i dane się wyświetlają, zarówno po stronie controllera jak i po stronie API.
Byłabym bardzo wdzięczna, bo od tygodnia siedzę przy tym problemie i nie umiem ruszyć dalej :(
sinke
Aleksandra

Posty: 34
Dołączył(a): 15.06.2011
Lokalizacja: Bieruń

Re: [Angular] Problem z wyświetlaniem się $scope w ng-view

Post 16.08.2015, 13:12:25

Nie analizowałem kodu dokładnie, ale nie powinien kod pantonsLoadera wyglądać tak?

Kod: Zaznacz cały
    pokayokaCtr.factory('pantonsLoader', ['$http', function($http) {
       

       return function (successCallback) {

          $http.get( 'api/admin/pantons/get' ).
          success(successCallback).error( function(){
             console.log( 'Błąd pobrania pliku z bazy danych! pantons' );
          });
       };
    }]);
?
Dziękuję wszystkim za lata współpracy, ciekawych pytań i dyskusji. Będę wspominał to forum z wielkim sentymentem • kukawski.pl
Avatar użytkownikakuku
Rafał Kukawski

410 Gone
410 Gone

Posty: 19894
Dołączył(a): 14.04.2002

Re: [Angular] Problem z wyświetlaniem się $scope w ng-view

Post 16.08.2015, 13:31:03

Działa!! Dzięki wielkie!
Tą funkcje zrobiłam na podstawie controllera dlatego nie dodałam successCallback, bo nie wiedziałam, że trzeba. Jestem jeszcze nowa w Angularze. :)

Dzięki jeszcze raz za pomoc!
sinke
Aleksandra

Posty: 34
Dołączył(a): 15.06.2011
Lokalizacja: Bieruń

Re: [Angular] Problem z wyświetlaniem się $scope w ng-view

Post 16.08.2015, 15:23:50

Mam jeszcze jedno pytanie... :) jak dodać do bazy zaznaczone checkboxy, które generują się automatycznie?

Kod: Zaznacz cały
<div class="p-pantony" >
    <label ng-repeat="panton in pantons | filter : search track by panton.nazwa_pan" class="checkbox-inline" style="width: 100px; float: left; border-bottom: 10px solid rgb({{panton.R}},{{panton.G}},{{panton.B}}); margin:0 10px 10px 0;">
             <input type="checkbox"  ng-model="article.koloryArt.{{panton.nazwa_pan}} " > {{panton.nazwa_pan}}
     </label>
</div>


Bo takie coś nie działa... :(, próbowałam również ng-init, ale też to nic nie dało.
sinke
Aleksandra

Posty: 34
Dołączył(a): 15.06.2011
Lokalizacja: Bieruń


Powrót do JavaScript


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: Google [Bot] i 15 gości

Subskrypcja

Mamy 54423 zarejestrowanych użytkowników.
Najnowszy użytkownik: gotobage


Nasi użytkownicy napisali:

  • 942248 wiadomości
  • w 251270 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)