Question

好的，所以我有两个控制器可以控制站点的两个截然不同的部分，它们位于同一页面上。

第一个是简报注册表，第二个是购物篮。第二个不是作为ng-controller指令直接放在DOM中，而是作为自定义指令的控制器。

一些代码：

<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>

当任何一个控制器中的$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

两个控制器，Angular

1 个答案: