如何在负载角上从ng-view的控制器触发一个函数

The goal of this question is to have an active class, that is set on the current view's navigation anchor. The trigger for this active class is a function that executes on the view's load and not the user's click.

这个问题的目标是拥有一个活动类，它设置在当前视图的导航锚点上。这个活动类的触发器是一个在视图的负载上执行的函数，而不是用户的单击。

I believe, by removing the ng-click function from the navigation anchors and replacing them within the .config -> .when -> .controller of each route of my applications I can create a better interaction with my navigation bar.

我相信，通过从导航锚上删除ng-click函数，并将它们替换为.config -> .when -> .controller中的应用程序的每条路径，我可以与我的导航条创建更好的交互。

I have 3 views:

我有三个观点:

var angApp = angular.module('ang6App', [
  'ngCookies',
  'ngResource',
  'ngSanitize',
  'ngRoute'
])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl' //placing the function call here wont work when i use a string also.?
      })
      .when('/flights', {
        templateUrl: 'views/flights.html',
        controller: 'FlightsCtrl'
      })
      .when('/reservations', {
        templateUrl: 'views/reservations.html',
        controller: 'ReservationsCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

setActive Function inside MainCtrl

setActive MainCtrl内部函数

angular.module("ang6App")
  .controller("MainCtrl", function ($scope) {

    $scope.setActive = function (type) {
      $scope.destinationActive = ""; //sets to null
      $scope.flightsActive = "";
      $scope.reservationsActive = "";

      $scope[type + "Active"] = "active"; //targets and matches varible and sets ng-class to active
    };

  });

2 additional empty controllers

2额外的空的控制器

angular.module('ang6App')
  .controller('ReservationsCtrl', function ($scope) {

  });

angular.module('ang6App')
  .controller('FlightsCtrl', function ($scope) {


  });

HTML -- how can I remove the ng-click from the anchors

HTML——如何从锚点删除ng-click

<body ng-app="ang6App">
    <div class="page-container" ng-controller="MainCtrl">
      <div  class="container">
        <ul class="nav nav-pills">
          <li ng-class="destinationsActive">
            <a ng-click="setActive('destinations')"  href="#">Destinations</a>
          </li>

          <li ng-class="flightsActive">
            <a ng-click="setActive('flights')"  href="#/flights">Flights</a>
          </li>

          <li ng-class="reservationsActive">
            <a ng-click="setActive('reservations')"  href="#/reservations">Reservations</a>
          </li>

        </ul> 
      </div>
      <div class="container" ng-view=""></div>
    </div><!--end of MainCtrl page-container-->
</body>

1 个解决方案

#1

I would suggest to use the full power of ngClass

我建议充分利用ngClass的力量

<li ng-class="{active:selected=='destination'}">
  <a ng-click="selected = 'destination'"  href="#" >Destinations</a>
</li>

<li ng-class="{active:selected=='flight'}">
  <a ng-click="selected = 'flight'"  href="#/flights">Flights</a>
</li>

<li ng-class="{active:selected=='reservation'}">
  <a ng-click="selected ='reservation'"  href="#/reservations">Reservations</a>
</li>

Now we do not need action setActive. The ngClick works with the model ($scope.selected), selecting the intended value. The ngClass reads the selection and applies the .active class for us

现在我们不需要动作setActive。ngClick使用模型($scope.selected)，选择预期值。ngClass读取选择并为我们应用.active类

So: We can set the $scope.selected with a default, no need to trigger anything on load, just set the correct selection in controller...

因此:我们可以设置$范围。选择的默认，不需要触发任何加载，只要设置正确的选择在控制器…

#1