Декорирование простого HTML с атрибутами Angular

0

Я новичок в Angular, но я хорошо знаком с моим первым приложением. Это довольно сложно, поэтому я включил упрощенный пример для объяснения моей проблемы.

У меня такой угловой шаблон;

    <html>
        <head>
        ...
        </head>
        <body ng-controller="MyController">
            <h1>My Template</h1>
            <ol id="menu">
                <li ng-repeat="section in sections" ng-click="goTo($index)">{{section.name}}</li>
            </ol>
            <div id="wrapper">
                <?php echo $html; ?>
            </div>
        </body>
    </html>

Идея состоит в том, что упорядоченный список будет действовать как меню, чтобы показать текущий раздел и скрыть все остальные. Мой PHP-скрипт создает разделы из существующего HTML, который выглядит так:

    <section>
        <h1>Page 1</h1>
        <p>Some text here</p>
    </section>
    <section>
        <h1>Page 2</h1>
        <p>Text for page 2</p>
    </section>

Я хотел бы как-то использовать Angular для выполнения следующего;

  1. Добавить Угловую разметку в обычный HTML
  2. Получите текст из первого тега H1 каждого раздела и используйте его для заполнения областей scope.sections

Думаю, конечный результат будет выглядеть следующим образом;

    <html>
        <head>
        ...
        </head>
        <body ng-controller="MyController">
            <h1>My Template</h1>
            <ol id="menu">
                <li ng-repeat="section in sections" ng-click="goTo($index)">{{section.name}}</li>
            </ol>
            <div id="wrapper">
                <section ng-if="currentSection == 1">
                    <h1>Page 1</h1>
                    <p>Some text here</p>
                </section>
                <section ng-if="currentSection == 2">
                    <h1>Page 2</h1>
                    <p>Text for page 2</p>
                </section> 
            </div>
        </body>
    </html>

Я понимаю, что я мог бы сделать первую часть с некоторой заменой строки PHP, но я подумал, есть ли решение с угловым разрешением, как в реальном проекте, замена PHP невозможна.

Любые указатели были бы высоко оценены!

Теги:

2 ответа

0

Я уверен, что есть более интересный ответ на этот вопрос, но пока, вот решение, которое я придумал;

Во-первых, функция для настройки моего навигатора - в основном находит все теги <section> и для каждого, захватывает первое вхождение <h1>, добавляя текст к привязке $ scope.sections. Это приводит к массиву строк, который мой ngRepeat может использовать для создания списка меню.

    function setupNavigation() {
        angular.forEach(angular.element(document.querySelectorAll('section')), function(value, key) {
            $scope.sections.push(angular.element(value.querySelector('h1')).text());
        });
    }

Затем функция, которая привязана к ngClick моих повторных элементов списка. Он скрывает все разделы, прежде чем показывать соответствующий.

    $scope.goTo = function(index) {
        angular.element(document.querySelectorAll('section')).hide().eq(index).show();
    }

Там будет более надежное решение, используя, вероятно, компиляцию и директивы $, но поскольку это только 2-й день обучения Angular, я думаю, что оставлю это на другой день!

Поделиться
0

Я бы немного изменил это. Во-первых, я отправил все данные разделов в приложение angularjs в виде массива JSON через вызов AJAX после загрузки страницы. Вы также можете выводить данные разделов как JSON непосредственно на страницу, а затем загружать эти данные в контроллер, но это будет менее эффективно для начального времени загрузки.

Обычно я делаю это с помощью фабрики AngularJS, чтобы вызывать определенный URL-адрес, который просто эхо-данные json_encoded и выход. Дополнительная информация о фабриках здесь http://viralpatel.net/blogs/angularjs-service-factory-tutorial/

После того, как вы поделились своими разделами как JSON, у вас должен быть массив, и каждый элемент в массиве должен быть объектом раздела с базовым information-, таким как имя и содержимое. Оттуда вы просто повторяете ng-repeat дважды:

В контроллере JS

// Init variables
$scope.location = 0; // set default
$scope.sections = []; // Create sections array

// Define function to 'go to' a section
$scope.goTo = function($index){
    $scope.location = $index;
}

jQuery('#wrapper section').each(function(){
    var name = jQuery('h2', this).first().text();
    var content = jQuery('p', this).first().text();
    var section = {name: name, content: content};
    $scope.sections.push(section);
};

В HTML

<html>
    <head>
    ...
    </head>
    <body ng-controller="MyController">
        <h1>My Template</h1>
        <ol id="menu">
            <li ng-repeat="section in sections" ng-click="goTo($index)">{{section.name}}</li>
        </ol>
        <div id="wrapper">
            <section ng-if="location == $index" ng-repeat="section in sections">
                <h1>{{section.name}}</h1>
                {{section.content}}
            </section>
        </div>
    </body>
</html>
Поделиться
  • 0
    Привет, Микел, из-за характера проекта, я должен добавить в шаблон необработанную разметку из html-файлов. К сожалению, я не могу указать, что разделы предоставляются как объекты в формате JSON ;-(
  • 0
    У вас есть контроль над HTML? Все, что в данный момент проходит по разделам и выводит div <section> </ section>, может быть просто json_encoded на странице как переменная JS. Если вы абсолютно не контролируете какой-либо HTML-код, я могу предоставить некоторый код (с использованием jQuery), который будет анализировать HTML-код и добавлять его в приложение AngularJS, тогда вы можете продолжить с оставшейся частью моего ответа.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню