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

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 :)