2017-01-03 12 views
0

が更新されていない私は、サーバーへの非同期要求を行い、その後、複雑なコントローラオブジェクトに返された値を適用する次の機能があります。コントローラの範囲は

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ディレクティブは空のオブジェクトですが、コントローラー自体は正しく定義されています。 enter image description here enter image description here コントローラではcontrolllerAs構文を使用します。私も$ apply()メソッドを試しましたが、まだ結果はありません。

仕事plunkr:私はPlunkr

をしないのですか?

+0

ディレクティブをどのように使用していますか?テンプレートを追加できますか? –

+0

@AvneshShakya質問が更新されました – AlexBerd

+0

まず、console.log()を追加して何が解決され、何が解決されないのか見てみましたか?次に、$ dashboardFactory呼び出しをそのまま使用する代わりに、関数にすべてを入れて、console.logを呼び出して、期待通りのものが得られているかどうかを確認します。第3に、$ this.widgets = []を初期化します。あなたのvar $ this = thisの後。それが役立つかどうかを見てください。 – rrd

答えて

-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

+0

助けてくれてありがとうございます。しかし、私の問題は隔離されたスコープではなく、コントローラスコープであります。より簡単な理解のために私はPSを添付してください。 – AlexBerd

+0

@は一方向のバインディングではありません。これはテキストバインディングです。 –

+0

@FrederikPrijck:えええええええええええええええええええええええええ:http://stackoverflow.com/questions/33126555/angularjs-directives-isolated-scope-one-way-data-binding-not-working-for-objecこれがクリアされることを願ってほぼ同じ。 –