Question

我正在开发一个基于AngularJS 1.5的管理面板应用程序。其结构如下：

app.html

<div class="wrapper">
    <message-component></message-component>
    <header></header>
    <leftbar></leftbar>
    <body></body>
</div>

有一次，通常会出现三个组成部分：header，leftbar和body。我在我调用函数的ng-if组件中使用leftbar指令。

leftbar.html

<li ng-if="leftbar.hasPermission('FOO')">
    <a ui-sref="foo">
        <span>Demo Page</span>
    </a>
</li>

leftbar.controller

class LeftbarController {
    constructor() {}

    hasPermission(name) {
        return user[name];
    }
}

如果用户具有名为“FOO”的权限，它基本上显示<li>。现在，同时我的body组件对用户也是可见的，并且内部存在一个输入字段，因此每当我在该字段中写入某些内容hasPermission时，也会调用该方法，该方法存在于另一个组件中

那么这里的问题是什么？为什么范围表现得像这样？