Можете ли вы поместить элементы непосредственно в ng-view?

Я создаю слайд-шоу в angularJS и хочу изменить ссылку навигационных стрелок на основе templateUrl. Я не хочу иметь стрелки с уникальными URL-адресами в каждом шаблоне, поэтому я решил создать один набор и поместить его в ng-view, а затем просто изменить ссылку на основе того, какой шаблон/контроллер я использую. Это возможно?Можете ли вы поместить элементы непосредственно в ng-view?

HTML:

<div ng-view> 

    <div class="dashNav"> 
    <a ng-show="prevValue" href="#/{{prev}}"><img src="images/[email protected]" width="18"></a> 
    <a ng-show="nextValue" href="#/{{next}}"><img src="images/[email protected]" 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; 

});

источник

2015-12-15 nehas

Вы могли бы использовать какую-то услугу навигации ...

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; 
     } 
    } 
    }); 
});

Тогда на ваш взгляд ...

<body ng-controller="MainCtrl"> 
    <div class="dashNav"> 
     <a ng-show="prevValue" ng-href="#/{{prevStep}}"><img ng-src="{{prevImg}}">Prev</a> 
     <a ng-show="nextValue" ng-href="#/{{nextStep}}"><img ng-src="{{nextImg}}">Next</a> 
    </div> 

    <ng-view></ng-view> 

</body>

Вы можете заполнить значения/магазина, ГУИ источники Ng-HREF в и т.д. через службу. В ниже приведенном ниже разделе я сохранил текущую информацию о маршруте в службе, а затем передаю информацию через контроллер каждого представления.

Plunk: http://plnkr.co/edit/Ii1y8pSlOeXbJJmxNq3F?p=preview

источник

2015-12-15 18:51:16 developthewebz

Вы не возражаете, показывая пример? Как я могу сделать фальшь «prevValue», когда я нахожусь на маршруте «/» и правдиво, когда я нахожусь на маршруте «/ about»? – nehas

@nehas Я создал простую навигационную службу, чтобы дать вам общее представление о том, что вы можете сделать (я обновил свой выше пост). Вы можете даже упроститься и обновить действия службы от контроллеров и т. Д. Сообщите мне, если это то, что вы искали. – developthewebz

это отлично работает! Но в чем смысл setCurrentRoute и getCurrentRoute? Он отлично работает без него. – nehas

Можете ли вы поместить элементы непосредственно в ng-view?

ответ

Смежные вопросы