Использование компонентов AngularJS - PullRequest
Новая
       6

Использование компонентов AngularJS

0 голосов
/ 28 января 2019

все.Я новичок в angularJS, и теперь я пытаюсь реализовать некоторые патры.Вот мой код ниже.

Вопросы: как мне получить доступ к обратному вызову onFinish (), который передается компоненту "мой таймер" и запустить его?this.onFinish () возвращает ошибку.

Вот моя разметка: 

<div ng-app="app" ng-controller="MyCtrl as myCtrl">
  <div>
    Status: {{myCtrl.status ? myCtrl.status : 'Waiting...'}}
  </div>

  <div>
    <button ng-click="myCtrl.addTimer(5)">Add timer</button>
  </div>

  <div ng-repeat="timer in myCtrl.timers">
    <div>
      <h3>Timer {{timer.id}}</h3>
      <button ng-click="myCtrl.removeTimer($index)">X</button>
      <my-timer id="{{timer.id}}" start-seconds="{{timer.seconds}}" on-finish="myCtrl.onFinish(endTime)"></my-timer>
    </div>
  </div>
</div>

А вот index.js 

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

app.controller('MyCtrl', class {
      constructor($scope) {
        this.status = null;
        this.timerId = 0;
        this.timers = [];
        this.addTimer(10);
        this.addTimer(3);
      console.log($scope);
      }

  addTimer(seconds) {
    this.timers.push({
      id: this.timerId++,
      seconds
    });
  }

  removeTimer(index) {
    this.timers.splice(index, 1);
  }

onFinish(endTime){
    this.status = `Timer finished at ${endTime}`;
  console.log(endTime);
}

});

app.component('myTimer', {
  bindings: {
    id: '@',
    startSeconds: '@',
    onFinish: '&',
  },

  controller: function($interval, $scope) {
    this.endTime = null;

this.$onInit = function() {
  this.countDown();
};

this.countDown = function() {
  $interval(() => {
    this.startSeconds = ((this.startSeconds - 0.1) > 0) ? (this.startSeconds - 0.1).toFixed(2) : 0;
  }, 100);
}; 
  },
template: `<span>{{$ctrl.startSeconds}}</span>`,
});

А вот jsFiddle

1 Ответ

0 голосов
/ 29 января 2019 
this.$onInit = function() {
  this.countDown();
};

this.onFinish('1');

Проблема здесь в том, что вы пытались выполнить this.onFinish прямо в теле контроллера.И это не сработает.Если вы хотите, чтобы эта функция вызывалась во время инициализации, переместите ее на $onInit

this.$onInit = function() {
  this.countDown();
  this.onFinish('1');
 };

В противном случае вызовите ее из другого метода компонента.Вы можете объявлять только переменные и методы компонентов в теле контроллера, но не вызывать функции.

...