Javascript 在呈现模板之前解析AngularJS指令中的内容
我在页面上有一个由服务器呈现的元素。让我们称之为播放列表。这将是一个指令。Javascript 在呈现模板之前解析AngularJS指令中的内容,javascript,angularjs,angularjs-directive,Javascript,Angularjs,Angularjs Directive,我在页面上有一个由服务器呈现的元素。让我们称之为播放列表。这将是一个指令。 播放列表在编译前包含大量的曲目。 … 加载页面后,我将包括AngularJS和解析播放列表以及一条指令 当我初始化playlist指令时,我希望在编译它的模板并使用收集的数据在属于playlist指令的ng repeat指令中绘制track指令之前遍历它的内容 问题: 在模板替换指令标记中的任何内容之前,是否有用于解析内容的本机功能?一旦我进入指令控制器,内容已经被替换 有更好的办法解决我的问题吗?不幸的是,我不得不将
播放列表在编译前包含大量的曲目。…
加载页面后,我将包括AngularJS和解析播放列表以及一条指令
当我初始化playlist指令时,我希望在编译它的模板并使用收集的数据在属于playlist指令的ng repeat
指令中绘制track指令之前遍历它的内容
问题:
<div playlist>
<div class="Track" data-track-name="Pompeii">Pompeii</div>
<div class="Track" data-track-name="Weight of living">Weight of living</div>
</div>
庞贝城
生活重量
编译后:
<div playlist>
<!-- from playlist template -->
<div class="Playlist">
<div class="Playlist-controls">....</div>
<div class="Playlist-tracks">
<div track ng-repeat="track in tracks">
<!-- from track template -->
<div class="Track">...</div>
</div>
</div>
</div>
</div>
....
...
假设这是您的数据结构,您可以轻松完成这一切,而无需指令:
数据结构/控制器
function ctrl($scope) {
$scope.Playlists = [
{ name: 'Playlist 1', tracks: [ 'Track 1', 'Track 2', ..., 'Track n'] },
{ name: 'Playlist 2', tracks: [ 'Track 1', 'Track 2', ..., 'Track n'] },
...
{ name: 'Playlist n', tracks: [ 'Track 1', 'Track 2', ..., 'Track n'] }
];
}
模板:
<div ng-controller="ctrl">
<div ng-repeat="playlist in Playlists">
<div> {{ playlist.name }} </div>
<div ng-repeat="track in playlist.tracks">
{{ track }}
</div>
</div>
</div>
<div ng-app="myApp">
<script type="text/ng-template" id="tpl.html">
<div>My playlist controls</div>
<div ng-repeat="track in tracks">
{{ track }}
</div>
</script>
<div playlist>
<div class="Track" data-track-name="Pompeii">Pompeii</div>
<div class="Track" data-track-name="Weight of living">Weight of living</div>
</div>
</div>
[编辑#2]包括拜尔的建议。如果将来有人发现这很有用,请添加此选项
模板:
<div ng-controller="ctrl">
<div ng-repeat="playlist in Playlists">
<div> {{ playlist.name }} </div>
<div ng-repeat="track in playlist.tracks">
{{ track }}
</div>
</div>
</div>
<div ng-app="myApp">
<script type="text/ng-template" id="tpl.html">
<div>My playlist controls</div>
<div ng-repeat="track in tracks">
{{ track }}
</div>
</script>
<div playlist>
<div class="Track" data-track-name="Pompeii">Pompeii</div>
<div class="Track" data-track-name="Weight of living">Weight of living</div>
</div>
</div>
我找到了一个我非常乐意使用的解决方案 我从服务器以指令形式为曲目编写内容:
<div track track-id="245" track-name="Pompeii" track-duration="3.24">Pompeii</div>
庞贝城
在我的播放列表模板中,我使用了一个
指令,它从原始DOM中获取播放列表的内容,将其解析为单独的指令,并注入到播放列表模板的指定部分。我认为您可能看错了。所有数据操作都应该在控制器中完成,指令应该对更改做出反应。你有没有可能拼凑出一个JSFIDLE?Angular的强大之处在于您不需要解析DOM。另外,还有带有pre-Link和post-Link的链接来操作DOM和作用域。实际上,您可以发布播放列表的数据结构/模型吗?这可能有助于我理解您想要的内容。播放列表有一些控件,如playAll或queueAll,而曲目有play或queue之类的控件。除此之外,它们没有太多的数据结构。是的,这是理想的解决方案-但我绝对必须在页面加载时使用DOM中的内容。Angular的诀窍是首先考虑数据。通常,对于jQuery这样的框架,您需要考虑结构和布局。当我开始使用Angular时,我也落入了同样的陷阱。可能是Angular不适合你的工作。如果需要解析DOM,那么使用jQuery可能会更好。如果jQuery是解析DOM数据的最佳方式,那么这一切都很好——不管怎样,我仍然需要在应用程序的其余部分使用Angular。实际上,我只是想在引导指令之前,看看是否可以访问它的内容。如果不是的话,我将不得不重新思考如何使用DOM生成数据模型(我不满意,但这是这个项目的一个要求)。@mister_rampage问得好,我还没有看到compile在野外使用那么多。关于您为什么要使用它的最佳参考资料已经结束,具体请参见关于“编译”与“链接”的示例部分。就我个人而言,我自己从来没有真正使用过compile。@Beyers+1,我认为文档中的关键语句是“这使范围模型成为唯一的真理来源”。整个DOM构建模型的操作似乎违背了角度的观点。播放列表
的意义是什么,如果你也可以在服务器上渲染它呢?我同意Beyer的观点。DOM解析的问题是,如果DOM发生了变化,Angular就不知道了,因为模型没有更新。从某种意义上说,你的观点已成为典范。也许最好让服务器渲染它,这样做完全没有角度。非js版本中的播放列表只是曲目名称列表,但在js版本中,它是一个带有大量额外标记的交互式设备,每个曲目都有相同的标记。