Question

我有下一个函数，我对服务器执行异步请求，然后将返回值应用于复杂的控制器对象：

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;
            };
....

模板看起来像：

 $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

我缺少什么？

Answer 1

您使用@中的directive进行单向绑定。

所以尝试将{{}}的{{1}}绑定属性，如下所示：

在此jsfiddle link <div class="clock-container"> <div ngx-timer widgetId={{widget.id}} timeWidgetFor="{{now}}" type="{{hours}}" class="box hours" id="hours"></div> </div> ），双向绑定（@）和事件绑定（=）的不同用法>

指令中的控制器范围未更新

1 个答案: