Javascript 用角度属性装饰普通HTML
我对Angular是个新手，但我的第一份申请就已经完成了。它相当复杂，所以我用了一个非常简单的例子来解释我的问题 我有一个像这样有角度的模板Javascript 用角度属性装饰普通HTML,javascript,php,html,angularjs,Javascript,Php,Html,Angularjs,我对Angular是个新手，但我的第一份申请就已经完成了。它相当复杂，所以我用了一个非常简单的例子来解释我的问题 我有一个像这样有角度的模板 <html> <head> ... </head> <body ng-controller="MyController"> <h1>My Template</h1>
<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>
<section>
<h1>Page 1</h1>
<p>Some text here</p>
</section>
<section>
<h1>Page 2</h1>
<p>Text for page 2</p>
</section>
<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>
<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>
<section>
<h1>Page 1</h1>
<p>Some text here</p>
</section>
<section>
<h1>Page 2</h1>
<p>Text for page 2</p>
</section>
<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>
<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>
<section>
<h1>Page 1</h1>
<p>Some text here</p>
</section>
<section>
<h1>Page 2</h1>
<p>Text for page 2</p>
</section>
<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>
任何指点都将不胜感激 我会稍微改变一下。首先，我会在页面加载后通过AJAX调用将所有部分数据作为JSON数组发送到angularjs应用程序。您也可以直接在页面上以JSON的形式输出节数据，然后将该数据加载到控制器中，但这对于初始加载时间来说效率较低 我通常使用AngularJS工厂来调用一个特定的URL，该URL将简单地回显json_编码的数据并退出。这里有更多关于工厂的信息 一旦将节作为JSON拉入，就应该有一个数组，数组中的每个项都应该是一个带有基本信息（例如名称和内容）的节对象。从这里开始，您只需重复两次ng，如下所示： 在控制器JS中 在HTML中
我相信有一个更有趣的答案，但现在，我想出了一个解决方案 首先，一个设置我的nav的函数-它基本上找到所有标记，并为每个标记捕获第一个出现的，将文本添加到我的$scope.sections绑定中。这将产生一个字符串数组，my ngRepeat可用于构建菜单列表
function setupNavigation() {
angular.forEach(angular.element(document.querySelectorAll('section')), function(value, key) {
$scope.sections.push(angular.element(value.querySelector('h1')).text());
});
}
$scope.goTo = function(index) {
angular.element(document.querySelectorAll('section')).hide().eq(index).show();
}
可能会有一个使用$compile和指令的更健壮的解决方案，但由于这只是学习Angular的第2天，我想我会把它留到下一天 嗨，Mikel，由于项目的性质，我必须将html文件中的原始标记注入到模板中。不幸的是，我不能指定这些部分是作为JSON格式的对象提供的-你能控制HTML吗？当前在各节中循环并输出div的内容可以在页面上作为JS变量进行json_编码。如果您完全无法控制任何HTML，我可以使用jQuery提供一些代码，这些代码将解析HTML并将其添加到AngularJS应用程序中，那么您可以从那里继续我的其余答案。@Tom Hey Tom，我刚刚用一些填充$scope.sections的jQuery更新了我的答案，但老实说，这是一种错误的做法。如果你无法控制它，你打算如何将这个ng if添加到HTML中？谢谢你的帮助@Mikel，最后我找到了一个jqLite解决方案，以便及时工作-