javascript - 如何在 View 中多次正确使用同一个 AngularJS 1.5 组件？

Question

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

<小时/>

我的主要 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

<小时/>

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

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

Answer 1

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

var $widget = this;

而不是

$widget = this;

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