AngularJs. Цикл в $ scope. $ Watch

Question

Я не могу понять, что случилось. Мне нужно создать массив часов и минут и показать ему.

HTML:

<div ng-app="test"> 
    <div ng-controller="timeCtrl" ng-init="opentime='9';closetime='24'"> 
     <div ng-repeat="time in times"> 
      <a href="#">{{time}}</a> 
     </div> 
    </div> 
</div> 

JS:

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

app.controller('timeCtrl', ['$scope', function ($scope) { 

    $scope.$watch('opentime', function() { 

     $scope.times = [];  

     for (var hours = $scope.opentime; hours < $scope.closetime; hours++) { 

     console.log(hours); 

      for (var minutes = 0; minutes < 4; minutes++) { 

       var linkMinutes = minutes * 15; 

       if (linkMinutes === 0) { 
        linkMinutes = "00"; 
       } 

      console.log(linkMinutes); 

      $scope.times.push(hours + ':' + linkMinutes); 

      } 
     } 


    }); 


}]) 

Почему console.log пуст, но вары opentime и closetime со значением?

Fiddle: http://jsfiddle.net/Zoomer/mj8zv2qL/

Answer 1

что, поскольку переменная сфера opentime никогда не были изменены, чтобы стрелять Watcher

I'v обновляемых example и моделировали изменение переменной

Answer 2

сфера $ часы будут выполняться только тогда, когда. opentime значение изменения смотрите здесь https://docs.angularjs.org/api/ng/type/ $ rootScope.Scope

и эта демонстрация http://jsfiddle.net/oprhy6te/enter link description here

CTRL:

app.controller('timeCtrl', ['$scope', function ($scope) { 

    $scope.$watch('opentime', function() { 

     $scope.updateTimes(); 

    }); 


    $scope.updateTimes = function() { 
     $scope.times = []; 

     for (var hours = $scope.opentime; hours < $scope.closetime; hours++) { 

      console.log(hours); 

      for (var minutes = 0; minutes < 4; minutes++) { 

       var linkMinutes = minutes * 15; 

       if (linkMinutes === 0) { 
        linkMinutes = "00"; 
       } 

       console.log(linkMinutes); 

       $scope.times.push(hours + ':' + linkMinutes); 

      } 
     } 
    } 

    function activate() { 
     $scope.opentime = 9; 
     $scope.closetime = 13; 
     $scope.updateTimes(); 

    } 

     activate(); 

}]) 

HTML:

<div ng-app="test"> 
    <div ng-controller="timeCtrl"> 
     <input type="text" ng-model="opentime" /> 
     <div ng-repeat="time in times"> <a href="#">{{time}}</a> 
     </div> 
    </div> 
</div>