從控制器數組進行指令訪問內的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演示

最終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);
}
})();