使用Angular属性装饰纯色HTML

我对Angular很新，但是我的第一个应用程序很好。这非常复杂，所以我包含了一个简单的例子来解释我的问题。使用Angular属性装饰纯色HTML

我有一个这样的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
从每节的第一个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更换是不可行的。

任何指针将不胜感激！

来源

2015-10-29 Tom

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

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

一旦以JSON的形式提取了部分，应该有一个数组，并且数组中的每个项都应该是一个包含基本信息（例如名称和内容）的部分对象。从那里，你只需做NG重复两次，像这样：

在控制器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>

来源

2015-10-29 20:05:02

嗨米克尔，由于项目的性质，我必须从html文件注入原始标记到模板中。不幸的是，我无法指定这些部分是作为JSON格式化对象提供的;-( – Tom

您是否拥有HTML的控制权？无论当前是循环浏览各个部分并输出

div，只需将json_encoded作为JS变量如果你完全无法控制任何HTML，我可以提供一些代码（使用jQuery），它将解析HTML并将其添加到AngularJS应用程序，那么你很乐意与我的其余部分 –

@Tom嘿，汤姆，我刚刚更新了一些jQuery的填充$ scope.sections的答案，但老实说，这是做错的方式，你打算如何添加

这个ng - 如果对HTML没有控制权吗？ –

我敢肯定有一个更有趣的答案，但现在，这是我提出的解决方案;

首先，一个函数来设置我的导航 - 它基本上找到所有<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天！

来源

2015-10-30 01:02:07 Tom

使用Angular属性装饰纯色HTML

回答

相关问题