ビューで同じAngularJS 1.5コンポーネントを複数回正しく使用する方法はありますか？

Question

私はAngularJS 1.5の新しいコンポーネントでウィジェットのセットを作成しています。問題は、同じウィジェットを複数回使用すると、何らかの形でコントローラまたはスコープを共有することです。コンポーネントのことの一つが、そのスコープが完全に分離されていると思ったのですか？

<widget-list 
    title="Books" 
    class="col-xs-12 col-md-4"> 
</widget-list> 

<widget-list 
    title="Movies" 
    class="col-xs-12 col-md-4"> 
</widget-list> 

<widget-list 
    title="Albums" 
    class="col-xs-12 col-md-4"> 
</widget-list> 

マイウィジェットテンプレート：

<div class="widget widget-list"> 
    <div class="panel b-a"> 

     <div class="panel-heading b-b b-light"> 
      <h5>{{$widget.title}}</h5> 
      <div class="pull-right"> 
       <button type="button" class="btn btn-default btn-sm" ng-click="$widget.doSomething()"> 
        Do something 
       </button> 
      </div> 
     </div> 

     <div class="panel-content"> 
      {{$widget.content || 'No content'}} 
     </div> 

    </div> 
</div> 

マイウィジェット成分：

app.component('widgetList', { 
    templateUrl: 'template/widget/widget-list.html', 
    bindings: { 
     title : '@', 
    }, 
    controllerAs: '$widget', 
    controller: function($timeout) { 

     $widget = this; 

     console.log('Title on init: ', $widget.title) 

     $timeout(function() { 
      console.log('Title after 3 seconds: ', $widget.title) 
     }, 3000) 

     $widget.doSomething = function() { 
      $widget.content = "Something"; 
     } 
    } 
}); 

---

ウィジェットを保持

---

私の主なHTMLテンプレート210

私のコードを実行している場合、これは私のコンソールは次のようになります。

レンダリング後も

Title on init: Books 
Title on init: Movies 
Title on init: Albums 
(3) Title after 3 seconds: Albums 

---

、すべての3つのウィジェットがそのテンプレートにNo contentを表示します。しかし、3つのウィジェットのいずれかでdoSomething()ボタンをクリックすると、最後のウィジェットのコンテンツのみがSomethingに更新されます。

ここで何が起こっているか私のコンポーネントが「分離されていない」のはなぜですか？代わりに

$widget = this; 

の

var $widget = this; 

それは混乱を作成します$ウィジェット変数は、コントローラへの参照を保持しているため：

Answer 1

は、ここで$ウィジェットと呼ばれるグローバル変数を持っているように、これを試して見えますこの場合、第3のコンポーネントのコントローラに最近初期化されている。

Answer 2

コードの問題は、ウィンドウスコープで$widgetを宣言していることです。そのため、コントローラがインスタンス化されるたびにオーバーライドされたため、コントローラが最後の値を出力します。代わりにvar $widgetを使用すると、コードは正常に動作します。あなたがこれを見てい

angular.module('app', []) 
 
    .component('widgetList', { 
 
    templateUrl: 'template/widget/widget-list.html', 
 
    bindings: { 
 
     title: '@', 
 
    }, 
 
    controllerAs: '$widget', 
 
    controller: WidgetListController 
 
    }); 
 

 
function WidgetListController($timeout) { 
 

 
    var $widget = this; 
 

 
    console.log('Title on init: ', $widget.title) 
 

 
    $timeout(function() { 
 
    console.log('Title after 3 seconds: ', $widget.title) 
 
    }, 3000) 
 

 
    $widget.doSomething = function() { 
 
    $widget.content = "Something"; 
 
    } 
 
} 
 

 
angular.element(document).ready(function() { 
 
    angular.bootstrap(document, ['app']); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.1/angular.min.js"></script> 
 
<widget-list title="Books" class="col-xs-12 col-md-4"> 
 
</widget-list> 
 

 
<widget-list title="Movies" class="col-xs-12 col-md-4"> 
 
</widget-list> 
 

 
<widget-list title="Albums" class="col-xs-12 col-md-4"> 
 
</widget-list> 
 

 
<script type="text/ng-template" id="template/widget/widget-list.html"> 
 
    <div class="widget widget-list"> 
 
    <div class="panel b-a"> 
 

 
     <div class="panel-heading b-b b-light"> 
 
     <h5>{{$widget.title}}</h5> 
 
     <div class="pull-right"> 
 
      <button type="button" class="btn btn-default btn-sm" ng-click="$widget.doSomething()"> 
 
      Do something 
 
      </button> 
 
     </div> 
 
     </div> 
 

 
     <div class="panel-content"> 
 
     {{$widget.content || 'No content'}} 
 
     </div> 
 

 
    </div> 
 
    </div> 
 
</script>