Как использовать ng-repeat в частичных html-файлах с использованием угловых маршрутов

Следующий код был частью моего основного файла html, но я решил разделить приложение на частичные, а затем отобразить его, но я застрял сейчас и не нажимаю, t знать, как повторить визуализацию кода.Как использовать ng-repeat в частичных html-файлах с использованием угловых маршрутов

<div class="col-md-12" ng-controller="TimeSlotController as calendar" > 
<div class="col-md-5 col-md-offset-1 timeblock" ng-repeat="slots in calendar.timeslot" ng-click="calendar.selectTimeSlot(slots.time)"> 
    <h3 class="event-type-name">[[ slots.time]] Hour Appointment</h3> 
    <div class="description mts">[[slots.description]]</div> 
    <div class="cost"><i class="fa fa-euro"></i> [[slots.cost ]]</div> 
</div>

Это как мой контроллер выглядит прямо сейчас

app.config(function($interpolateProvider, $routeProvider, $locationProvider) { 

    $interpolateProvider.startSymbol('[['); 
    $interpolateProvider.endSymbol(']]'); 

    $routeProvider 
       .when('/timeslot', { 
        controller: 'TimeSlotController as timerange', 
        templateUrl:'/views/timeslot.html' 
       }) 
       .when('/calendar', { 
        controller: 'CalendarController', 
        templateUrl:'/views/calendar.html' 
       }) 
       .when('/mail', { 
        controller: "MailController", 
        templateUrl: '/views/mail.html' 
       }) 
       .otherwise({ 
        redirecTo: '/timeslot' 
       }); 

    $locationProvider.html5Mode({ 
         enabled: true, 
         requireBase: false 
        });   


}); 


app.controller("TimeSlotController", function($rootScope, $location, $scope) { 

    $scope.timeslot = [ 
     { 
     time:1, 
     description: "Welcome to my scheduling page. Please follow the instructions to add an event to my calendar.", 
     cost: "10" 
     }, 
     { 
     time:2, 
     description: "Welcome to my scheduling page. Please follow the instructions to add an event to my calendar.", 
     cost: "20" 
     }, 
     { 
     time:4, 
     description: "Welcome to my scheduling page. Please follow the instructions to add an event to my calendar.", 
     cost: "10" 
     }, 
     { 
     time:6, 
     description: "Here lies 3", 
     cost: "10" 
     } 
    ]; 

    console.log($scope.timeslot); 

    $scope.selectTimeSlot = function(timeslot) { 

     $rootScope.timeSlot = timeslot; 

     console.log($rootScope.timeSlot); 

     $location.path('/calendar'); 
    } 

});

Как использовать нг-повтора в таких типов файлов? Я немного огляделся, но не смог найти то, что искал.

источник

2014-12-01 Bazinga777

у вас есть плукер? Во всяком случае, я заметил, что вы используете 'calendar.' в HTML, чтобы квалифицировать переменные области. Попробуйте без него, позволяя автоматически поднять его. – Dinesh

ng-repeat="slots in timeslot"

Plunker: http://plnkr.co/edit/ImdmHlpevzO6FL2fe2EP?p=preview

Как сказал Динеш, удалить календарь, когда вы указываете контроллер. Если вы не делаете что-то более сложное, о чем мы не знаем, Angular достаточно умен, чтобы узнать, какой контроллер вы пытаетесь использовать.

источник

2014-12-02 01:45:40

Спасибо, что сработало; Я все еще смущен тем, как отлаживать такую вещь в будущем; какие-нибудь советы ? – Bazinga777

Используйте привязку агрессивно в разработке и тестировании и начинайте с вершины. В этом случае размещение {{calendar.timeslot}} в HTML ничего не отображало, поэтому я знал, что у нас там проблема. Изменение его на {{timeslot}} привело к созданию всего массива временных интервалов (очевидно, не то, что вы хотите туда, но это показывает, что вы получили этот массив в DOM. Хороший знак!) Как только у вас есть родительский объект в DOM, ng-повторение его довольно просто. Надеюсь, что это поможет! –

Как использовать ng-repeat в частичных html-файлах с использованием угловых маршрутов

ответ

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