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

这是预期的输出吗？

代码的问题是。

您已经使用过。ng-controller="clockController as vm"在DIV中，但尚未初始化控制器。您需要使用以下行

进行操作

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