Question

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

我正在尝试根据当前路径显示或隐藏导航栏。我的第一种方法（控制器作为语法）的问题在于，无论当前路径如何，导航栏都会被隐藏：

'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的类对象。所以我认为不需要$ scope dependecy。看到这个简单的例子

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

我发布答案的时间已经很晚了，但希望这有助于进一步发展和理解。

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来不断查看位置路径。每当路径被更改时，观察者将获得更改，然后您的代码将正常工作。所以你不需要重新加载页面。

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

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

希望答案在将来有用。

谢谢＆amp;问候。

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

2 个答案: