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

【问题标题】：Angular1.3: Access functions from standard controllers, inside a view which uses controllerAs?Angular1.3：从标准控制器访问功能，在使用控制器的视图内？
【发布时间】：2015-10-17 15:48:51
【问题描述】：

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

我所有的其他视图（使用 controllerAs）都有一个带有 ng-click 的按钮，我用它来访问上面的 $scope.toggleMenu() 函数和 ng-class，但这不起作用，我没有'也没有任何错误：

view1.html：

<span class="btn btn-default"
        ng-click="toggleMenu()">
    MENU
</span>

View1.js：

angular
 .module('myApp.view1', [])

 .controller('View1Ctrl', [
      function(){
      ................
       }
    ]);

另外，我再次这样做的原因是因为我的导航栏在我的应用程序中是持久的。这是否违反了最佳实践？

【问题讨论】：

标签： javascript angularjs angularjs-scope frontend angularjs-controller

【解决方案1】：

如果您使用.. controller as .. 语法，请确保您将它用于所有控制器。不要有选择性。

接下来，在使用语法时，您不需要注入$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>

您可以获得更多有关使用controller as 语法here 的提示

【讨论】：