Javascript Angular1.3：在使用ControllerA的视图内，从标准控制器访问功能？

我在主app.js文件中定义了一个简单的控制器，它控制导航栏的打开/关闭，并且在我的应用程序的所有其他视图中都可见：

app.js：

.controller('mainController', ['$scope', function($scope){
  $scope.menuActive = false;

  $scope.toggleMenu = function(){
    $scope.menuActive = !$scope.menuActive;
  }
}]);

index.html：

<nav class="side-menu"  ng-class="{ 'side-menu-open' : menuActive }">
    <ul>
      <li>LINK1</li>
      <li>LINK2</li>
    </ul>
</nav>

<!--Other views::.....-->
<div ui-view></div>

---

另外，我之所以再次这样做，是因为我的导航栏在整个应用程序中都是持久的。这是否有可能违反最佳做法？

如果您使用的是

。。控制器作为..

语法，确保对所有控制器都使用它。不要挑剔

接下来，在使用语法时，不需要插入

$scope

对象。您需要改为使用

this

变量，并将通常与

$scope

对象关联的任何属性或函数附加到

this

对象

因此,

$scope.toggleMenu = function(){
    $scope.menuActive = !$scope.menuActive;
}

变成

this.toggleMenu = function(){
    this.menuActive = !this.menuActive;
}

最后，在视图中，确保将每个表达式与控制器关联

<div ng-controller="mainController as main">
    <nav class="side-menu"  ng-class="{ 'side-menu-open' : main.menuActive }">
        <ul>
            <li>LINK1</li>
            <li>LINK2</li>
        </ul>
    </nav>
    <div ui-view>
        <!-- Assuming that the following gets compiled to ui-view -->
        <span class="btn btn-default" ng-click="main.toggleMenu()">
            MENU
        </span>
    </div>
</div>

链接1
链接2

菜单

您可以获得有关将

控制器用作

语法的更多提示

this.toggleMenu = function(){
    this.menuActive = !this.menuActive;
}

<div ng-controller="mainController as main">
    <nav class="side-menu"  ng-class="{ 'side-menu-open' : main.menuActive }">
        <ul>
            <li>LINK1</li>
            <li>LINK2</li>
        </ul>
    </nav>
    <div ui-view>
        <!-- Assuming that the following gets compiled to ui-view -->
        <span class="btn btn-default" ng-click="main.toggleMenu()">
            MENU
        </span>
    </div>
</div>