angular/angular.js

View on GitHub
images/docs/guide/dom_scope.svg

Summary

Maintainability
Test Coverage
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 576 733" width="48pc" height="733pt" xmlns:dc="http://purl.org/dc/elements/1.1/"><metadata> Produced by OmniGraffle 6.5.2 <dc:date>2011-05-11 16:27:17 +0000</dc:date></metadata><defs><filter id="Shadow" filterUnits="userSpaceOnUse"><feGaussianBlur in="SourceAlpha" result="blur" stdDeviation="1.308"/><feOffset in="blur" result="offset" dx="0" dy="2"/><feFlood flood-color="black" flood-opacity=".5" result="flood"/><feComposite in="flood" in2="offset" operator="in"/></filter><font-face font-family="Helvetica" font-size="12" units-per-em="1000" underline-position="-75.683594" underline-thickness="49.316406" slope="0" x-height="522.94922" cap-height="717.28516" ascent="770.01953" descent="-229.98047" font-weight="500"><font-face-src><font-face-name name="Helvetica"/></font-face-src></font-face><linearGradient x1="0" x2="1" id="Gradient" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#91ff9e"/><stop offset="1" stop-color="#aaa"/></linearGradient><linearGradient id="Obj_Gradient" xl:href="#Gradient" gradientTransform="translate(305.5 366) rotate(90) scale(17)"/><font-face font-family="Helvetica" font-size="14" units-per-em="1000" underline-position="-75.683594" underline-thickness="49.316406" slope="0" x-height="522.94922" cap-height="717.28516" ascent="770.01953" descent="-229.98047" font-weight="500"><font-face-src><font-face-name name="Helvetica"/></font-face-src></font-face><linearGradient x1="0" x2="1" id="Gradient_2" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff92f"/><stop offset="1" stop-color="#aaa"/></linearGradient><linearGradient id="Obj_Gradient_2" xl:href="#Gradient_2" gradientTransform="translate(55.5 57) rotate(90) scale(38)"/><linearGradient x1="0" x2="1" id="Gradient_3" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="white"/><stop offset=".5" stop-color="#91ea96"/><stop offset="1" stop-color="#aaa"/></linearGradient><linearGradient id="Obj_Gradient_3" xl:href="#Gradient_3" gradientTransform="translate(294 57) rotate(90) scale(38)"/><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker" viewBox="-1 -4 10 8" markerWidth="10" markerHeight="8" color="black"><g><path d="M 8 0 L 0 -3 L 0 3 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker><linearGradient id="Obj_Gradient_4" xl:href="#Gradient_3" gradientTransform="translate(288.5 220.5) rotate(90) scale(38)"/><linearGradient id="Obj_Gradient_5" xl:href="#Gradient_3" gradientTransform="translate(297.5 229.5) rotate(90) scale(38)"/><linearGradient id="Obj_Gradient_6" xl:href="#Gradient_3" gradientTransform="translate(306.5 238.5) rotate(90) scale(38)"/><linearGradient id="Obj_Gradient_7" xl:href="#Gradient_3" gradientTransform="translate(317.5 247.5) rotate(90) scale(38)"/><font-face font-family="Helvetica" font-size="12" units-per-em="1000" underline-position="-75.683594" underline-thickness="49.316406" slope="0" x-height="532.22656" cap-height="719.72656" ascent="770.01953" descent="-229.98047" font-weight="bold"><font-face-src><font-face-name name="Helvetica-Bold"/></font-face-src></font-face><linearGradient id="Obj_Gradient_8" xl:href="#Gradient_2" gradientTransform="translate(59 432.5) rotate(90) scale(20)"/><linearGradient id="Obj_Gradient_9" xl:href="#Gradient_3" gradientTransform="translate(59 465.5) rotate(90) scale(20)"/><linearGradient x1="0" x2="1" id="Gradient_4" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f5ff35"/><stop offset="1" stop-color="#aaa"/></linearGradient><linearGradient id="Obj_Gradient_a" xl:href="#Gradient_4" gradientTransform="translate(108.688 123.001) rotate(90) scale(57.999)"/><linearGradient x1="0" x2="1" id="Gradient_5" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f4ff3a"/><stop offset="1" stop-color="#aaa"/></linearGradient><linearGradient id="Obj_Gradient_b" xl:href="#Gradient_5" gradientTransform="translate(91 224.5) rotate(90) scale(38)"/><linearGradient id="Obj_Gradient_c" xl:href="#Gradient_5" gradientTransform="translate(100 233.5) rotate(90) scale(38)"/><linearGradient id="Obj_Gradient_d" xl:href="#Gradient_5" gradientTransform="translate(109 242.5) rotate(90) scale(38)"/><linearGradient id="Obj_Gradient_e" xl:href="#Gradient_5" gradientTransform="translate(118 251.5) rotate(90) scale(46)"/><linearGradient id="Obj_Gradient_f" xl:href="#Gradient_2" gradientTransform="translate(106 366) rotate(90) scale(17)"/><font-face font-family="Courier New" font-size="10" panose-1="2 7 6 9 2 2 5 2 4 4" units-per-em="1000" underline-position="-232.91016" underline-thickness="100.097656" slope="0" x-height="443.35938" cap-height="591.79688" ascent="832.51953" descent="-300.29297" font-weight="bold"><font-face-src><font-face-name name="CourierNewPS-BoldMT"/></font-face-src></font-face><linearGradient id="Obj_Gradient_10" xl:href="#Gradient_2" gradientTransform="translate(55.5 312.75) rotate(90) scale(38)"/></defs><g stroke="none" stroke-opacity="1" stroke-dasharray="none" fill="none" fill-opacity="1"><title>Canvas 1</title><rect fill="white" width="576" height="733"/><g><title>Layer 1</title><g><xl:use xl:href="#id71_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id101_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id105_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id4_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id6_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id23_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id24_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id25_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id26_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id37_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id42_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id43_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id55_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id67_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id69_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id70_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id72_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id81_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id85_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id56_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id88_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id89_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id90_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id107_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id108_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id589_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id591_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id592_Graphic" filter="url(#Shadow)"/></g><g id="id71_Graphic"><path d="M 453.55 247 L 549.45 247 C 560.7936 247 570 251.48 570 257 C 570 262.52 560.7936 267 549.45 267 L 453.55 267 C 442.2064 267 433 262.52 433 257 C 433 251.48 442.2064 247 453.55 247" fill="white"/><path d="M 453.55 247 L 549.45 247 C 560.7936 247 570 251.48 570 257 C 570 262.52 560.7936 267 549.45 267 L 453.55 267 C 442.2064 267 433 262.52 433 257 C 433 251.48 442.2064 247 453.55 247" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(451.7 250)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="11.529492" y="11" textLength="76.541016">name: &quot;Misko&quot;</tspan></text></g><line x1="432.5031" y1="257.1769" x2="350.49927" y2="257.38715" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/><g id="id101_Graphic"><rect x="248" y="366" width="115" height="17" fill="url(#Obj_Gradient)"/><rect x="248" y="366" width="115" height="17" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(253 366)" fill="black"><tspan font-family="Helvetica" font-size="14" font-weight="500" x="3.0795898" y="14" textLength="98.84082">AngularJS Scopes</tspan></text></g><g id="id105_Graphic"><rect x="459" y="365" width="91" height="18" fill="#fefffc"/><rect x="459" y="365" width="91" height="18" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(464 365.5)" fill="black"><tspan font-family="Helvetica" font-size="14" font-weight="500" x="4.7036133" y="14" textLength="71.592773">Data Model</tspan></text></g><g id="id4_Graphic"><rect x="21" y="57" width="69" height="38" fill="url(#Obj_Gradient_2)"/><rect x="21" y="57" width="69" height="38" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(26 69)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="11.1572266" y="11" textLength="36.685547">&lt;html&gt;</tspan></text></g><g id="id6_Graphic"><ellipse cx="294" cy="76" rx="71.000113" ry="19.00003" fill="url(#Obj_Gradient_3)"/><ellipse cx="294" cy="76" rx="71.000113" ry="19.00003" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(242.2 69)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="2.1007813" y="11" textLength="99.39844">angular root scope</tspan></text></g><line x1="90.5" y1="76" x2="212.59996" y2="76" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4,4"/><g id="id23_Graphic"><ellipse cx="288.5" cy="239.5" rx="43.50007" ry="19.00003" fill="url(#Obj_Gradient_4)"/><ellipse cx="288.5" cy="239.5" rx="43.50007" ry="19.00003" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(258.7 225.5)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="9.784375" y="11" textLength="43.365234">angular </tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="13.789258" y="25" textLength="32.021484">scope</tspan></text></g><g id="id24_Graphic"><ellipse cx="297.5" cy="248.5" rx="43.50007" ry="19.00003" fill="url(#Obj_Gradient_5)"/><ellipse cx="297.5" cy="248.5" rx="43.50007" ry="19.00003" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(267.7 234.5)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="9.784375" y="11" textLength="43.365234">angular </tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="13.789258" y="25" textLength="32.021484">scope</tspan></text></g><g id="id25_Graphic"><ellipse cx="306.5" cy="257.5" rx="43.50007" ry="19.00003" fill="url(#Obj_Gradient_6)"/><ellipse cx="306.5" cy="257.5" rx="43.50007" ry="19.00003" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(276.7 243.5)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="9.784375" y="11" textLength="43.365234">angular </tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="13.789258" y="25" textLength="32.021484">scope</tspan></text></g><g id="id26_Graphic"><ellipse cx="317.5" cy="266.5" rx="45.500073" ry="19.00003" fill="url(#Obj_Gradient_7)"/><ellipse cx="317.5" cy="266.5" rx="45.500073" ry="19.00003" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(286.1 252.5)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="9.052344" y="11" textLength="48.029297">repeater </tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="15.389258" y="25" textLength="32.021484">scope</tspan></text></g><line x1="293.34407" y1="95.49896" x2="289.15589" y2="220.00231" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><line x1="294.39564" y1="95.49963" x2="297.10436" y2="229.00083" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><line x1="295.34267" y1="95.49562" x2="305.1577" y2="238.00971" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><line x1="296.40378" y1="95.48597" x2="315.09803" y2="247.02876" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><g id="id37_Graphic"><rect x="12" y="407.5" width="284" height="169.5" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/></g><text transform="translate(7 408.5)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="bold" x="9.495117" y="11" textLength="26.009766">Key:</tspan></text><g id="id42_Graphic"><rect x="39" y="432.5" width="40" height="20" fill="url(#Obj_Gradient_8)"/><rect x="39" y="432.5" width="40" height="20" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(44 435.5)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="2.991211" y="11" textLength="24.017578">&lt;...&gt;</tspan></text></g><g id="id43_Graphic"><ellipse cx="59" cy="475.5" rx="20.000032" ry="10.000016" fill="url(#Obj_Gradient_9)"/><ellipse cx="59" cy="475.5" rx="20.000032" ry="10.000016" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(48 468.5)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="4.326172" y="11" textLength="13.347656">ng</tspan></text></g><text transform="translate(99 468.5)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="11" textLength="78.720703">AngularJS Scope</tspan></text><text transform="translate(99 435.5)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="11" textLength="60.017578">DOM Node</tspan></text><g id="id55_Graphic"><rect x="30" y="123.001" width="157.376" height="57.999" fill="url(#Obj_Gradient_a)"/><rect x="30" y="123.001" width="157.376" height="57.999" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(35 131.0005)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="11" textLength="19.681641">&lt;ul </tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="25" textLength="122.91211">  ng:init=&quot;name=&apos;Hank&apos;;</tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="39" textLength="146.23242">              names=[&apos;Igor&apos;,...]&quot;&gt;</tspan></text></g><g id="id67_Graphic"><path d="M 442.95 87 L 536.05 87 C 547.0624 87 556 91.48 556 97 C 556 102.52 547.0624 107 536.05 107 L 442.95 107 C 431.9376 107 423 102.52 423 97 C 423 91.48 431.9376 87 442.95 87" fill="white"/><path d="M 442.95 87 L 536.05 87 C 547.0624 87 556 91.48 556 97 C 556 102.52 547.0624 107 536.05 107 L 442.95 107 C 431.9376 107 423 102.52 423 97 C 423 91.48 431.9376 87 442.95 87" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(441.3 90)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="11.590625" y="11" textLength="73.21875">name: &quot;Hank&quot;</tspan></text></g><line x1="360.40406" y1="83.132913" x2="427.48322" y2="90.338345" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/><g id="id69_Graphic"><path d="M 456.95 187 L 550.05 187 C 561.0624 187 570 191.48 570 197 C 570 202.52 561.0624 207 550.05 207 L 456.95 207 C 445.9376 207 437 202.52 437 197 C 437 191.48 445.9376 187 456.95 187" fill="white"/><path d="M 456.95 187 L 550.05 187 C 561.0624 187 570 191.48 570 197 C 570 202.52 561.0624 207 550.05 207 L 456.95 207 C 445.9376 207 437 202.52 437 197 C 437 191.48 445.9376 187 456.95 187" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(455.3 190)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="16.925586" y="11" textLength="62.548828">name: &quot;Kai&quot;</tspan></text></g><g id="id70_Graphic"><path d="M 455.55 217 L 551.45 217 C 562.7936 217 572 221.48 572 227 C 572 232.52 562.7936 237 551.45 237 L 455.55 237 C 444.2064 237 435 232.52 435 227 C 435 221.48 444.2064 217 455.55 217" fill="white"/><path d="M 455.55 217 L 551.45 217 C 562.7936 217 572 221.48 572 227 C 572 232.52 562.7936 237 551.45 237 L 455.55 237 C 444.2064 237 435 232.52 435 227 C 435 221.48 444.2064 217 455.55 217" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(453.7 220)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="16.527539" y="11" textLength="66.54492">name: &quot;Gail&quot;</tspan></text></g><g id="id72_Graphic"><path d="M 456.95 277.5 L 550.05 277.5 C 561.0624 277.5 570 281.98 570 287.5 C 570 293.02 561.0624 297.5 550.05 297.5 L 456.95 297.5 C 445.9376 297.5 437 293.02 437 287.5 C 437 281.98 445.9376 277.5 456.95 277.5" fill="white"/><path d="M 456.95 277.5 L 550.05 277.5 C 561.0624 277.5 570 281.98 570 287.5 C 570 293.02 561.0624 297.5 550.05 297.5 L 456.95 297.5 C 445.9376 297.5 437 293.02 437 287.5 C 437 281.98 445.9376 277.5 456.95 277.5" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(455.3 280.5)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="15.258594" y="11" textLength="65.882812">name: &quot;Igor&quot;</tspan></text></g><line x1="441.99458" y1="280.55584" x2="361.92715" y2="271.51598" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/><line x1="439.64139" y1="233.66487" x2="340.3122" y2="244.03177" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/><line x1="453.12554" y1="206.95774" x2="328.63162" y2="231.56701" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/><g id="id81_Graphic"><path d="M 433.5 118 L 538.5 118 C 550.92 118 561 125.168 561 134 C 561 142.832 550.92 150 538.5 150 L 433.5 150 C 421.08 150 411 142.832 411 134 C 411 125.168 421.08 118 433.5 118" fill="white"/><path d="M 433.5 118 L 538.5 118 C 550.92 118 561 125.168 561 134 C 561 142.832 550.92 150 538.5 150 L 433.5 150 C 421.08 150 411 142.832 411 134 C 411 125.168 421.08 118 433.5 118" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(431 120)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="15.563477" y="11" textLength="82.20703">names: &quot;[&apos;Igor&apos;, </tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="3.7978516" y="25" textLength="102.404297">&apos;Misko&apos;, &apos;Gail&apos;, Kai&apos;]&quot;</tspan></text></g><line x1="341.56009" y1="90.36713" x2="432.56627" y2="117.858626" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/><text transform="translate(99 520.5)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="11" textLength="82.710938">Scope Property</tspan></text><g id="id85_Graphic"><path d="M 41.8 517.5 L 78.2 517.5 C 82.5056 517.5 86 521.98 86 527.5 C 86 533.02 82.5056 537.5 78.2 537.5 L 41.8 537.5 C 37.4944 537.5 34 533.02 34 527.5 C 34 521.98 37.4944 517.5 41.8 517.5" fill="white"/><path d="M 41.8 517.5 L 78.2 517.5 C 82.5056 517.5 86 521.98 86 527.5 C 86 533.02 82.5056 537.5 78.2 537.5 L 41.8 537.5 C 37.4944 537.5 34 533.02 34 527.5 C 34 521.98 37.4944 517.5 41.8 517.5" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(44.2 520.5)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="6.463086" y="11" textLength="18.673828">this</tspan></text></g><line x1="178.4996" y1="272.07394" x2="261.81542" y2="268.73293" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4,4"/><line x1="169.4999" y1="260.27468" x2="252.64851" y2="258.59064" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4,4"/><line x1="160.4999" y1="251.27468" x2="243.64851" y2="249.59064" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4,4"/><line x1="151.4999" y1="242.27468" x2="234.64851" y2="240.59064" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4,4"/><g id="id56_Graphic"><rect x="31" y="224.5" width="120" height="38" fill="url(#Obj_Gradient_b)"/><rect x="31" y="224.5" width="120" height="38" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(36 236.5)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="16.638672" y="11" textLength="76.722656">&lt;LI&gt; Repeater</tspan></text></g><g id="id88_Graphic"><rect x="40" y="233.5" width="120" height="38" fill="url(#Obj_Gradient_c)"/><rect x="40" y="233.5" width="120" height="38" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(45 245.5)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="16.638672" y="11" textLength="76.722656">&lt;LI&gt; Repeater</tspan></text></g><g id="id89_Graphic"><rect x="49" y="242.5" width="120" height="38" fill="url(#Obj_Gradient_d)"/><rect x="49" y="242.5" width="120" height="38" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(54 254.5)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="16.638672" y="11" textLength="76.722656">&lt;LI&gt; Repeater</tspan></text></g><g id="id90_Graphic"><rect x="58" y="251.5" width="120" height="46" fill="url(#Obj_Gradient_e)"/><rect x="58" y="251.5" width="120" height="46" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(63 253.5)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="11" textLength="73.38867">&lt;li ng:repeat=</tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="25" textLength="104.23828">  &quot;name in names&quot;&gt;</tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="39" textLength="108.4043">  Name = {{ name }}!</tspan></text></g><path d="M 12 391.75 L 561 390.75 L 540 390.75" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><g id="id107_Graphic"><rect x="68" y="366" width="76" height="17" fill="url(#Obj_Gradient_f)"/><rect x="68" y="366" width="76" height="17" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(73 366)" fill="black"><tspan font-family="Helvetica" font-size="14" font-weight="500" x="4.5966797" y="14" textLength="8.551758">T</tspan><tspan font-family="Helvetica" font-size="14" font-weight="500" x="11.59668" y="14" textLength="49.80664">emplate</tspan></text></g><g id="id108_Graphic"><text transform="translate(117 64)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="bold" x="1.9946289" y="8" textLength="66.010742">ng:autobind</tspan></text></g><line x1="38" y1="501" x2="74.0636" y2="501" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4,4"/><g id="id589_Graphic"><text transform="translate(95.6242 493.62685)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="11" textLength="142.06055"> Implicit Scope Declaration</tspan></text></g><g id="id591_Graphic"><text transform="translate(190 273)" fill="black"><tspan font-family="Courier New" font-size="10" font-weight="bold" x="7.9956055" y="8" textLength="54.00879">ng:repeat</tspan></text></g><g id="id592_Graphic"><rect x="21" y="312.75" width="69" height="38" fill="url(#Obj_Gradient_10)"/><rect x="21" y="312.75" width="69" height="38" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(26 324.75)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="9.4902344" y="11" textLength="40.019531">&lt;/html&gt;</tspan></text></g><text transform="translate(99 553.5)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="11" textLength="172.10742">Binding Point Between Data &amp; V</tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="171.89648" y="11" textLength="18.005859">iew</tspan></text><text transform="translate(40 553.5)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="11" textLength="32.701172">{{ ... }}</tspan></text></g></g></svg>