使用 Angular 属性装饰纯 HTML答案

【问题标题】：Decorating plain HTML with Angular attributes使用 Angular 属性装饰纯 HTML
【发布时间】：2015-10-30 09:02:07
【问题描述】：

我对 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 本身来执行以下操作；

向纯 HTML 添加 Angular 标记
从每个部分的第一个 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 替换是不可行的。

任何指针将不胜感激！

【问题讨论】：

标签： javascript php html angularjs

【解决方案1】：

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

我通常使用 AngularJS 工厂来调用特定的 URL，该 URL 将简单地回显 json_encoded 数据并退出。更多关于工厂的信息在这里http://viralpatel.net/blogs/angularjs-service-factory-tutorial/

将部分作为 JSON 提取后，您应该有一个数组，并且数组中的每个项目都应该是一个包含基本信息（例如名称和内容）的部分对象。从那里，您只需执行两次 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>

【讨论】：

嗨 Mikel，由于项目的性质，我必须将原始标记从 html 文件注入到模板中。不幸的是，我不能指定这些部分是作为 JSON 格式的对象提供的；-(
您可以控制 HTML 吗？当前循环遍历这些部分并输出
div 的任何内容都可以在页面上作为 JS 变量进行 json_encoded。如果您绝对无法控制任何 HTML，我可以提供一些代码（使用 jQuery）来解析 html 并将其添加到 AngularJS 应用程序中，那么您可以从那里开始回答我的其余部分。
@Tom 嘿，汤姆，我刚刚用填充 $scope.sections 的一些 jQuery 更新了我的答案，但老实说，这是错误的做法。如果您无法控制它，您打算如何将
这个 ng-if 添加到 HTML 中？
感谢@Mikel 的帮助，最后我找到了一个 jqLite 解决方案，以便及时工作 ;-)

【解决方案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 天，我想我会再等一天！

【讨论】：