如何在视图中多次正确使用同一个 AngularJS 1.5 组件？

我正在使用 AngularJS 1.5 的新组件创建一组小部件。问题是，当多次使用同一个小部件时，它们会以某种方式共享控制器或范围。我认为组件的一件事是它们的范围是完全隔离的？

我的主要 html 模板包含小部件：

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

运行我的代码时，我的控制台如下所示：

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

此外，渲染后，所有三个小部件都会显示No content在他们的模板中。但是，当点击doSomething()三个小部件之一中的按钮，只有最后一个小部件的内容更新为Something.

这里发生了什么？为什么我的组件没有“隔离”？

看起来你这里有一个名为 $widget 的全局变量，试试这个：

var $widget = this;

代替

$widget = this;

它造成了混乱，因为 $widget 变量保存了对最近初始化的控制器的引用，在本例中是第三个组件的控制器。