Question

我对Angular很陌生，但我的第一个应用程序已经很好了。它非常复杂，所以我提供了一个简单的例子来解释我的问题。

我有一个像这样的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来执行以下操作;

将Angular标记添加到纯HTML
从每个部分的第一个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字符串替换来完成第一部分，但我想知道在实际项目中是否存在Angular解决方案，PHP替换是不可行的。

任何指针都会非常感激！

Answer 1

我稍微改变了一下。首先，我在页面加载后通过AJAX调用将所有节数据作为JSON数组发送到angularjs应用程序。您还可以直接在页面上将节数据输出为JSON，然后将这些数据加载到控制器中，但这对初始加载时间的效率会降低。

我通常使用AngularJS Factory来调用特定的URL，该URL只会回显json_encoded数据并退出。有关工厂的更多信息http://viralpatel.net/blogs/angularjs-service-factory-tutorial/

一旦你将你的部分作为JSON拉入，你就应该有一个数组，数组中的每个项目都应该是一个包含基本信息的section对象 - 比如名称和内容。从那里，你只需要两次ng-repeat，就像这样：

在控制器JS中

.hero__title { color: #000; }
.hero--project .hero__title { color: #cc0000; }

在HTML

中

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

Answer 2

我确信这是一个更有趣的答案，但就目前而言，这是我提出的解决方案;

首先，设置我的导航功能 - 它基本上找到所有<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();
    }

使用$ compile和指令可能会有一个更强大的解决方案，但是因为它只是学习Angular的第2天我想我会把它留下另一天！

使用Angular属性

2 个答案: