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

AngularJS来自控制器阵列的指令访问中的数据绑定

1 个答案: