mirror of
https://github.com/zhigang1992/angular.js.git
synced 2026-04-07 22:37:28 +08:00
1b1f94d8fe
The previous solution for opening Plunkers from the docs relied on tight coupling between the docs site and the plunkr site, in particular the URL to the example code on the docs server was hard coded in the Plunker site. This change goes back to the old POST method of creating a Plunker, but with a subtle difference: In the very old docs, the content was injected directly into the example HTML at build time. This was easy enough to do as the example actually ran in the current page but also increased the size of the doc page. The new examples are run in completely separate iframes. This new version of showing a Plunker loads the file content for the Plunker from the server by accessing the example's manifest.json file using $http requests. This also has the additional benefit that you can now generate plunkers from examples that are running locally or, frankly, in any folder on any server, such as personal builds on the Jenkins CI server. Closes #7186 Closes #7198
27 lines
1.1 KiB
HTML
27 lines
1.1 KiB
HTML
{# Be aware that we need these extra new lines here or marked will not realise that the <div>
|
|
is HTML and wrap each line in a <p> - thus breaking the HTML #}
|
|
|
|
<div>
|
|
<a ng-click="openPlunkr('{$ doc.example.outputFolder $}')" class="btn pull-right">
|
|
<i class="glyphicon glyphicon-edit"> </i>
|
|
Edit in Plunker</a>
|
|
<div class="runnable-example"
|
|
path="{$ doc.example.outputFolder $}"
|
|
{%- for attrName, attrValue in doc.example.attributes %}
|
|
{$ attrName $}="{$ attrValue $}"{% endfor %}>
|
|
|
|
{% for fileName, file in doc.example.files %}
|
|
<div class="runnable-example-file" {% for attrName, attrValue in file.attributes %}
|
|
{$ attrName $}="{$ attrValue $}"{% endfor %}>
|
|
{% code -%}
|
|
{$ file.fileContents $}
|
|
{%- endcode %}
|
|
</div>
|
|
{% endfor %}
|
|
|
|
<iframe class="runnable-example-frame" src="{$ doc.example.outputFolder $}/index.html" name="{$ doc.example.id $}"></iframe>
|
|
</div>
|
|
</div>
|
|
|
|
{# Be aware that we need these extra new lines here or marked will not realise that the <div>
|
|
above is HTML and wrap each line in a <p> - thus breaking the HTML #} |