Niedziałający Angular

Odpowiedz Nowy wątek
2015-01-23 16:45
0

Problem dotyczy biblioteki Angular od Google'a. Chciałbym zrobić coś prostego. Mianowicie przycisk, który znika/pojawia się za pomocą dyrektywy ng-show. Jednak nic nie dzieje się na ekranie, nawet jeżeli ręcznie wpiszę wartość (tj. ng-show="false"). Przekopuje od wczoraj forum za forum i nic mi nie działa, a problem jest zapewne prosty

index.html:

<?xml version='1.0' encoding='utf-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl" ng-app='Textarea'>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Angular - Textarea</title>

    <link rel='stylesheet' type='text/css' href='style.css' />

    <script type='text/javascript' 

src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>

    <script type='text/javascript' 

src='//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js'></script>

    <script type='text/javascript' src='ng-controllers.js'></script>    

</head>
<body style='padding:0px; margin:0px;' onload=''>
    <div class='Cont' ng-controller='TextAreaCtrl as ctrl'>
        <div class='TextAreaCont'>
            <textarea ng-model='text' placeholder='Write something...'></textarea>
        </div>
        <div class='ButtonCont' ng-show='ctrl.isButtonVisible()'>
            <button ng-click='ctrl.send()'>Send</button>
        </div>
    </div>
</body>

</html> 

kontroler:

angular.module('Textarea', [])
 .controller('TextAreaCtrl',['$scope', function($scope){

   $scope.isButtonVisible = function(){
      return false;
   }

   $scope.send = function(){
   }

}]);

Pozostało 580 znaków

2015-01-23 17:26
1

Jeśli używasz składni ControllerAs, to definiuj funkcje w taki sposób:

this.isButtonVisible = function() {}

Obecnie odwołujesz się tak:

$scope.ctrl.isButtonVisible

a takie coś nie istnieje, skoro wyżej masz:

$scope.isButtonVisible

Angular wybacza i traktuje undefined jako false, dlatego powinieneś element mieć niewidoczny. Z send jest podobny problem.
Warto swoją drogą zaktualizować wersję Angulara - ta, której używasz jest daleka od aktualnej.

Pozostało 580 znaków

2015-01-23 17:41
0

Powinien być niewidoczny, ale nie jest. I to jest właśnie najdziwniejsze. Zmieniłem skrypt na:

angular.module('Textarea', [])
 .controller('TextAreaCtrl', function(){

   this.isButtonVisible = function(){
      return false;
   }

   this.send = function(){
   }

}]);

Teraz jest ok? Tak teoretycznie, bo nadal nic mi nie działa xd

bez nawiasa kwadratowego na końcu oczywiście - gryguc 2015-01-23 17:42

Pozostało 580 znaków

2015-01-23 17:48

Reszta powinna działać, przekopiowałem wszystko i jest ok. Hmm... a odpalasz to na jakimś serwerze, czy po prostu plik html w przeglądarce? Bo jeśli to drugie, to nie podajesz protokołu w tym miejscu:


<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>

<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js'></script>

Pozostało 580 znaków

2015-01-23 17:52
0

I to był problem :D Wiedziałem że coś noobskiego
Dzięki za pomoc

Polecam zaglądanie do konsoli JS - w Google Chrome włącza się ją klawiszem F12, pewnie powiadamiała Cię o tym :) - rafiozo 2015-01-31 22:41

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0