が更新されていない私は、サーバーへの非同期要求を行い、その後、複雑なコントローラオブジェクトに返された値を適用する次の機能があります。コントローラの範囲は
this.createIdleTimeWidget = function() {
var $this = this;
$dashboardFactory.getIdleTimeCurrentStatus().then(function (response) {
var widgetId = $commonUtils.generateQuickGuid();
Object.keys(response.data).forEach(function (item) {
if (!hasOwnProperty.call($this.widgets, widgetId)) {
$this.widgets[widgetId] = {};
}
var obj = $dashboardFactory.genereteIdleStatusObject(item, response.data[item]);
Object.defineProperty($this.widgets[widgetId], Object.keys(obj)[0], {
value: obj[Object.keys(obj)[0]],
writable: true,
enumerable: true,
configurable: true
});
});
$this.dashboardOptions.addWidget({
name: 'idleTime',
id: widgetId
});
});
}
をウィジェットを追加し、次でディレクティブ呼び出し:
return {
restrict: 'EA',
scope: {
type: '@',
timewidgetfor: '@',
widgetid:'@'
},
controller: 'dashboardController',
link: function ($scope, element, iAttrs, controller) {
var date = new Date();
var seconds = date.getSeconds();
var minutes = date.getMinutes();
var hours = date.getHours();
function compileTemplate() {
var template = $templateCache.get('clockWidgetTemplate.html');
var interpolatedTemplate = $interpolate(template)($scope);
element.html($interpolate(template)($scope));
var elem = angular.element(document.querySelector('#' + iAttrs.id + ' .inner-box'));
return elem;
};
....
テンプレートは、次のようになります。dはしかし
$templateCache.put('clockTemplate.html',
'<div class="clock-container"><div ngx-timer widgetId={{widget.id}} timeWidgetFor="now" type="Hours" class="box hours" id="hours"></div> <div widgetId={{widget.id}} timeWidgetFor="now" ngx-timer type="Minutes" class="box minutes" id="minutes"></div><div ngx-timer widgetId={{widget.id}} timeWidgetFor="now" type="Seconds" class="box seconds" id="seconds"></div></div></div>'
+ '<div class="clock-container"><div ngx-timer widgetId={{widget.id}} timeWidgetFor="today" type="Hours" class="box hours" id="hours"></div> <div widgetId={{widget.id}} timeWidgetFor="today" ngx-timer type="Minutes" class="box minutes" id="minutes"></div><div ngx-timer widgetId={{widget.id}} timeWidgetFor="today" type="Seconds" class="box seconds" id="seconds"></div></div></div>'
+ '<div class="clock-container"><div ngx-timer widgetId={{widget.id}} timeWidgetFor="week" type="Hours" class="box hours" id="hours"></div> <div widgetId={{widget.id}} timeWidgetFor="week" ngx-timer type="Minutes" class="box minutes" id="minutes"></div><div ngx-timer widgetId={{widget.id}} timeWidgetFor="week" type="Seconds" class="box seconds" id="seconds"></div></div></div>'
+ '<div class="clock-container"><div ngx-timer widgetId={{widget.id}} timeWidgetFor="month" type="Hours" class="box hours" id="hours"></div> <div widgetId={{widget.id}} timeWidgetFor="month" ngx-timer type="Minutes" class="box minutes" id="minutes"></div><div ngx-timer widgetId={{widget.id}} timeWidgetFor="month" type="Seconds" class="box seconds" id="seconds"></div></div></div>');//<div ngx-timer type="AMPM" class="box ampm" id="ampm">
$templateCache.put('clockWidgetTemplate.html', '<div class="inner-box"> <span class="top">{{current}}</span><span class="top-next">{{next}}</span><span class="bottom-next">{{next}}</span> <span class="bottom">{{current}}</span> </div>');
、controller.widgets
ディレクティブは空のオブジェクトですが、コントローラー自体は正しく定義されています。 コントローラではcontrolllerAs構文を使用します。私も$ apply()メソッドを試しましたが、まだ結果はありません。
仕事plunkr:私はPlunkr
をしないのですか?
ディレクティブをどのように使用していますか?テンプレートを追加できますか? –
@AvneshShakya質問が更新されました – AlexBerd
まず、console.log()を追加して何が解決され、何が解決されないのか見てみましたか?次に、$ dashboardFactory呼び出しをそのまま使用する代わりに、関数にすべてを入れて、console.logを呼び出して、期待通りのものが得られているかどうかを確認します。第3に、$ this.widgets = []を初期化します。あなたのvar $ this = thisの後。それが役立つかどうかを見てください。 – rrd