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

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


        });
    }

添加小部件使用 next 调用指令：

 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 in 指令是空对象，而在控制器本身中它被定义得很好。 我在控制器中使用 controllerAs 语法。我也试过 $apply() 方法，还是没有结果。

工作小伙伴：Plunkr

我错过了什么？

Answer 1

您通过在directive 中使用@ 来使用一种方式绑定。

所以尝试使用{{}} 为@ 绑定属性，如下所示：

<div class="clock-container">
   <div ngx-timer widgetId={{widget.id}} timeWidgetFor="{{now}}" type="{{hours}}" class="box hours" id="hours"></div>
</div>

在此jsfiddle link中查看单向绑定（@）、双向绑定（=）和事件绑定（&）的不同用法