コントローラの範囲は

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

テンプレートは、次のようになります。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

をしないのですか？

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