Question

我正在angularJS中创建幻灯片，并希望根据templateUrl更改导航箭头的链接。我不想在每个模板中使用带有唯一网址的箭头，所以我想我可以创建一个集合并将其放在ng-view中，然后根据我使用的模板/控制器更改链接。这可能吗？

HTML：

<div ng-view>

  <div class="dashNav">
    <a ng-show="prevValue" href="#/{{prev}}"><img src="images/prev-arrow@2x.png" width="18"></a>
    <a ng-show="nextValue" href="#/{{next}}"><img src="images/next-arrow@2x.png" width="18"></a>
  </div>

</div>

使用Javascript：

angular
  .module('ciscoImaDashboardApp', ['ngRoute'])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/welcome.html',
        controller: 'mainCtrl'
      });

  });


angular.module('ciscoImaDashboardApp')
.controller('mainCtrl', function ($scope) {

    $scope.prevValue = false;
    $scope.nextValue = true;

});

Answer 1

你可以使用某种导航服务......

fgets

然后在你的控制器中，例如，你可以做这样的事情......

app.factory('navService', function() {
  var routes = {
    steps: [{
      id: 0,
      title: 'Home',
      route: '/',
      nextValue: true,
      prevValue: false,
      prevStep: null,
      nextStep: 'about'
    },
    {
      id: 1,
      title: 'About',
      route: '/about',
      nextValue: true,
      prevValue: true,
      nextStep: 'contact',
      prevStep: ''
    },
    {
      id: 2,
      title: 'Contact',
      route: '/contact',
      nextValue: false,
      prevValue: true,
      nextStep: null,
      prevStep: 'about'
    }]
  };

  return routes;
});

然后在你看来......

app.controller('MainCtrl', function($scope, navService, $location) {
  $scope.steps = navService.steps;
  $scope.prevValue = '';
  $scope.nextValue = '';
  $scope.prevStep = '';
  $scope.nextStep = '';
  $scope.route = '';

  $scope.$on('$routeChangeStart', function () {
    $scope.route = $location.path();
    for (var i=0; i<$scope.steps.length; i++) {
      if ($scope.route === $scope.steps[i].route) {
        $scope.prevValue = $scope.steps[i].prevValue;
        $scope.nextValue = $scope.steps[i].nextValue;
        $scope.prevStep = $scope.steps[i].prevStep;
        $scope.nextStep = $scope.steps[i].nextStep;
      }
    }
  });
});

您可以通过服务填充/存储值，ng-href，img源等。在下面的Plunk中，我已将当前路由信息存储在服务中，然后我在每个视图的控制器之间共享信息。

普兰克：http://plnkr.co/edit/Ii1y8pSlOeXbJJmxNq3F?p=preview

你能把元素直接放在ng-view中吗？

1 个答案: