AngularJS a práce s direktivami a událostí ng-click – JavaScript, AJAX, jQuery – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

AngularJS a práce s direktivami a událostí ng-click – JavaScript, AJAX, jQuery – Fórum – Programujte.comAngularJS a práce s direktivami a událostí ng-click – JavaScript, AJAX, jQuery – Fórum – Programujte.com

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
polonium0
Návštěvník
24. 8. 2015   #1
-
0
-

Zdravím ve spolek,

začal jsem zkoušet AngularJS a chtěl bych vytvořit jednoduchou appku, kde na obrazovce bude několik panelů s časovači. Každý časovač bude měřit vlastní čas a v jednu chvíli může běžet vždy jen jeden časovač.

V angularu jsem vytvořil dva controllery, ProjectCtrl a TimerPanelCtrl.

ProjectCtrl obsahuje pole objektů s projekty, kterým chci měřit čas. TimerPanelCtrl obsahuje logiku pro timer.

V tuto chvíli je možné timer ovládat pomocí tlačítek Start timer a Stop timer. Nebo přímo kliknutím na timer. Při zavolání uálosti timer-stopped se do konzole vypíše objekt model, kam se zapisují hodnoty. Tohle vše funguje krásně, ale nedaří se mi direktivě timer předat hodnotu modelu z controlleru.

Toto z nějakého důvodu nefunguje :(

<timer autostart="model.timerRunning">

Co dělám špatně?

index.html

<div class="container" ng-app="timerApp">
    <div class="row">
        <div class="col-sm-3 form-group">
            <label>Search</label>
            <input class="form-control" type="search" ng-model="query">
        </div>
    </div>
    <div class="row" ng-controller="ProjectCtrl">

        <div class="col-sm-4" ng-repeat="project in projects | filter:query">
            <div class="panel panel-default" ng-init="model = project" ng-controller="TimerPanelCtrl">
                <div class="panel-heading">{{model.name}}</div>
                <div class="panel-body">
                    <button class="btn btn-success" ng-click="clickTimer()" ng-disabled="false"><timer autostart="model.timerRunning">{{hhours}}:{{mminutes}}:{{sseconds}}</timer></button>

                    <button class="btn btn-default" ng-click="startTimer()" ng-disabled="model.timerRunning">Start Timer</button>
                    <button class="btn btn-default" ng-click="stopTimer()" ng-disabled="!model.timerRunning">Stop Timer</button>
                </div>
            </div>
        </div>

    </div>
</div>

app.js 

var app = angular.module('timerApp', ['timer']);

app.controller('TimerPanelCtrl', function  ($scope) {
    $scope.model = {
        id: null,
        name: null,
        timerValue: 0,
        timerRunning: false
    };

    $scope.clickTimer = function () {
        if($scope.model.timerRunning == false && $scope.model.timerValue == 0) {
            $scope.$broadcast('timer-start');
        }
        else if ($scope.model.timerRunning == true) {
            $scope.$broadcast('timer-stop');
        }
        else if ($scope.model.timerValue > 0) {
            $scope.$broadcast('timer-resume');
        }
        $scope.model.timerRunning = !$scope.model.timerRunning;
    };

    $scope.startTimer = function (){
        if ($scope.model.timerValue == 0) {
            $scope.$broadcast('timer-start');
        }
        else {
            $scope.$broadcast('timer-resume');
        }

        $scope.model.timerRunning = true;
    };

    $scope.stopTimer = function (){
        $scope.$broadcast('timer-stop');
        $scope.model.timerRunning = false;
    };

    $scope.$on('timer-stopped', function (event, args) {
        console.log($scope.model);
    });

    $scope.$on('timer-tick', function (event, args) {
        $scope.model.timerValue = args.millis;
    });

});

app.controller('ProjectCtrl', function ($scope) {
    $scope.projects = [
        {
            id: 1,
            name: "Timer App 1",
            timerValue: 0,
            timerRunning: true
        },
        {
            id: 2,
            name: "Timer App 2",
            timerValue: 0,
            timerRunning: false
        },
        {
            id: 3,
            name: "Timer App 3",
            timerValue: 0,
            timerRunning: false
        },
        {
            id: 4,
            name: "Timer App 4",
            timerValue: 0,
            timerRunning: false
        }
    ];
});

Používám angular-timer, kdyby jste se chtěli kouknout do dokumentace

http://siddii.github.io/angular-timer/index.html

Díky za rady :)

Nahlásit jako SPAM
IP: 85.71.142.–
Reklama
Reklama
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 18 hostů

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý