javascript - 两个 Controller ，一个 Angular 中的作用域变量

Question

好吧，我有两个 Controller 来控制网站的两个截然不同的部分，它们位于同一页面上。

第一个用于时事通讯注册表单，第二个用于购物篮。第二个不是作为 ng-controller 指令直接放置在 DOM 中，而是作为自定义指令的 Controller 。

部分代码:

<div ng-controller="newsletter-signup">
    <div ng-show="showLoader">
        ... Cool loading animation here ...
    </div>

    ... Form in here ...
</div>

<div basket>
    <div ng-show="showLoader">
        ... Cool loading animation here ...
    </div>

    ... Basket data in here ...
</div>

我遇到的问题是这两个都包含一个我只想在特定条件下显示的 div，并且这个 div 存储在模板文件中:

<div ng-show="showLoader">
    ... Cool loading animation here ...
</div>

然而，当任一 Controller 中的 $scope.showLoader 为 true 时，它会显示在时事通讯和购物篮中。

我似乎无法弄清楚如何将范围彼此隔离，但继续使用相同的变量名。

购物篮指令如下所示:

return {
    link : linkFn,
    scope: '=',
    restrict : 'A',
    controller : 'BasketController'
};

BasketController 从未在模板中定义。

我怎样才能解决这个问题？

我不希望时事通讯的 div 在购物车更新时显示，同样，我也不希望购物车的 div显示时事通讯更新时间。

编辑:我们正在使用以下内容来定义组件，我想知道这是否是根本原因。

window.angular.module('Basket', []);
window.angular.module('App', ['Basket']);

Answer 1

如@jme11 所述，您需要将作用域键传递给一个对象才能获得隔离的作用域。

在这两个地方变量是不同的，首先定义它的地方因此可以是真或假。然而，第二位是独立作用域，除非我们直接将变量传递给它，否则它将保持未定义状态，这在 JS 中是一个假值，因此 ng-show 不会通过。

这里有一支笔可以更好地说明问题...

return {
    link : linkFn,
    scope: {
      showLoader: '='
    },
    restrict : 'A',
    controller : 'BasketController'
};

http://codepen.io/stenmuchow/pen/BNrLZm?editors=101