使用 AngularJS ($scope vs. controller as syntax) 基于当前路径隐藏导航栏

Question

我正在使用 Inspinia Admin Theme（AngularJS 版本）并遇到以下问题。

我正在尝试根据当前路径显示或隐藏导航栏。我的第一种方法 (controller as syntax) 的问题是无论当前路径如何，导航栏都是隐藏的：

'use strict';

angular.module('inspinia')
  .controller('MainController', function ($location) {

  // use vm instad of $scope
  var vm = this;

  // show or hide navbar based on current path
  if ($location.path().indexOf('resetpass') > -1) {
    vm.hideNavbar = false; // false: hide navbar, true: navbar visible
  }else {
    vm.hideNavbar = true;
  }
});

如果我使用 $scope（见下文），导航栏的可见性会响应当前路径，但仅在刷新当前页面之后。所以我只在刷新 (cmd + r) 后获得新路径和所需功能。

angular.module('inspinia')
  .controller('MainController', function ($location, $scope) { 

  // show or hide navbar based on current path
  if ($location.path().indexOf('resetpass') > -1) {
    $scope.hideNavbar = false; // false: hide navbar, true: navbar visible
  }else {
    $scope.hideNavbar = true;
  }
});

此外，我在控制台中得到以下错误：

 15:7  error  You should not set properties on $scope in controllers. Use controllerAs syntax and add data to "this"  angular/controller-as
 17:7  error  You should not set properties on $scope in controllers. Use controllerAs syntax and add data to "this"  angular/controller-as

 ✖ 2 problems (2 errors, 0 warnings)

我的 HTML 看起来像这样 (content.html):

<div id="page-wrapper" class="white-bg {{$state.current.name}}">

    <!-- Page wrapper -->
    <div ng-include="'app/components/common/topnavbar.html'" ng-if="hideNavbar"></div>

    <!-- Main view  -->
    <div ui-view></div>


</div>

(index.html):

  <body ng-controller="MainController as main">

    <div ui-view></div>

  </body>

我做错了什么？

Answer 1

Controller 作为语法的工作方式是通过将 Controller 绑定到当前 $scope，而不是将其全部作为一个 $scope-like class-like 对象。所以我认为不需要 $scope 依赖。看这个简单的例子

var app = angular.module('myApp',[]);
app.controller('myCtrl', function(){

    this.title = 'Some title';
  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myCtrl as main">
    {{main.title}}
  </div>
</div>

Answer 2

我迟到了 post 答案，但希望它有助于进一步发展和理解。

angular.module('inspinia')
  .controller('MainController', function ($location, $scope) {

  // use vm instad of $scope
  var vm = this;

  // show or hide navbar based on current path
  $scope.$watch(function() {
    return $location.path();
  }, function(newPath, oldPath) {
    if (newPath.indexOf('resetpass') > -1) {
      vm.hideNavbar = false; // false: hide navbar, true: navbar visible
    }else {
      vm.hideNavbar = true;
    }
  });
});

查看上面的控制器代码。因为我已经使用 $scope.$watch 不断查看位置路径。每当更改路径时，watcher 都会得到更改，然后您的代码就会正常工作。所以你不需要重新加载页面。

您的 content.html 必须如下所示：

<div id="page-wrapper" class="white-bg {{$state.current.name}}">

    <!-- Page wrapper -->
    <div ng-include="'app/components/common/topnavbar.html'" ng-if="main.hideNavbar"></div>

    <!-- Main view  -->
    <div ui-view></div>    
</div>

当你使用controller作为语法时，不能有$scope来分配和访问视图中的$scope变量。控制器中使用的变量将是对象，它将保存通过 this 对象在控制器中分配的所有变量。

希望回答对以后有用。

感谢和问候。

使用 AngularJS ($scope vs. controller as syntax) 基于当前路径隐藏导航栏

Hiding navbar based on current path with AngularJS ($scope vs. controller as syntax)

angularjs

angularjs-scope

angularjs-controller

angular-ui-router

angular-ng-if