AngularJSコントローラ配列からのディレクティブアクセス内のデータバインド

Question

ディレクティブ内のデータバインディングを使用してコントローラ配列から値にアクセスしようとしています。コントローラ内でアレイを追加した後、プログラムがクラッシュします。 コードで何が間違っているか教えてもらえますか？

指令

(function() { 
'use strict'; 
angular.module('PK.myClock', []) 
    .directive('myClock', myClock); 

function myClock() { 
var directive = { 
    template: '<div>{{ vm.city }} ({{vm.difference}}): {{ vm.time | date : "HH:mm:ss"}}</div>', 
    controller: clockController, // controllerfunctie 
    controllerAs: 'vm',    // controllerAs-alias 
    bindToController: true, 
    scope: { 
     timezone: '@', 
     city: '@', 
     offset: '@' 
    } 
}; 
return directive; 
} 

コントローラ

clockController.$inject = ['$interval']; 
function clockController($interval) { 

var vm = this; 

vm.clocks = [ 
    { timezone="NL", city="Amsterdam", offset="0" }, 
    { timezone="USA", city="Las Vegas", offset="-9" }, 
    { timezone="THAI", city="Bangkok", offset="6" }, 
    { timezone="BE", city="Antwerpen", offset="0" } 
] 



console.log('Timezone: ' + vm.timezone); // simpele logging 
// interval loop 
var update = $interval(function() { 
    var offset = parseInt(vm.offset), // integer van van maken 
     here = new Date(), 
     there = new Date(); 

    vm.difference = offset > 0 
     ? offset + ' uur later' 
     : offset + ' uur vroeger'; 
    there.setHours(here.getHours() + offset); 
    vm.time = there; 
}, 1000); 
} 
})(); 

HTML

<div class="container" ng-controller="clockController as vm"> 
     <div ng-repeat="clock in vm.clocks" my-clock 
      timezone="{{clock.timezone}}" 
      city="{{clock.city}}" 
      offset="{{clock.offset}}"> 
     </div> 
    </div> 

Answer 1

これは、予想される出力ですか？

コードに問題がありました。

あなたが使用しました。 div内のng-controller="clockController as vm"はコントローラを初期化していません。あなたは下の行でそれをする必要があります

angular.module('PK.myClock', []).directive('myClock', myClock).controller('clockController', clockController); 

あなたは間違った構文で配列を書いていました。変更を確認するには、以下を参照してください。

前：

vm.clocks = [ 
    { timezone="NL", city="Amsterdam", offset="0" }, 
    { timezone="USA", city="Las Vegas", offset="-9" }, 
    { timezone="THAI", city="Bangkok", offset="6" }, 
    { timezone="BE", city="Antwerpen", offset="0" } 
] 

後：

vm.clocks = [ 
    { timezone:"NL", city:"Amsterdam", offset:"0" }, 
    { timezone:"USA", city:"Las Vegas", offset:"-9" }, 
    { timezone:"THAI", city:"Bangkok", offset:"6" }, 
    { timezone:"BE", city:"Antwerpen", offset:"0" } 
] 

JSFiddle Demo

決勝JS：

(function() { 
'use strict'; 
angular.module('PK.myClock', []).directive('myClock', myClock).controller('clockController', clockController); 

function myClock() { 
var directive = { 
    template: '<div>{{ vm.city }} ({{vm.difference}}): {{ vm.time | date : "HH:mm:ss"}}</div>', 
    controller: clockController, // controllerfunctie 
    controllerAs: 'vm', 
    bindToController: true, 
    scope: { 
     timezone: '@', 
     city: '@', 
     offset: '@' 
    } 
}; 
return directive; 
} 
clockController.$inject = ['$interval']; 
function clockController($interval) { 

var vm = this; 

vm.clocks = [ 
    { timezone:"NL", city:"Amsterdam", offset:"0" }, 
    { timezone:"USA", city:"Las Vegas", offset:"-9" }, 
    { timezone:"THAI", city:"Bangkok", offset:"6" }, 
    { timezone:"BE", city:"Antwerpen", offset:"0" } 
] 



console.log('Timezone: ' + vm.timezone); // simpele logging 
// interval loop 
var update = $interval(function() { 
    var offset = parseInt(vm.offset), // integer van van maken 
     here = new Date(), 
     there = new Date(); 

    vm.difference = offset > 0 
     ? offset + ' uur later' 
     : offset + ' uur vroeger'; 
    there.setHours(here.getHours() + offset); 
    vm.time = there; 
}, 1000); 
} 
})();