如何在SVG圈内包含角度JS表达式

时间:2015-04-25 23:06:44

标签: javascript angularjs svg

我有以下html代码来创建同心圆。

ListView_ItemDataBound()
{
    System.Data.DataRowView rowView = e.Item.DataItem as System.Data.DataRowView;

    //Pseudo code of what I'd like
    //if rowView["some_field"]==123 then
    //     insert row prior to this row being bound
}

我有另一个JS文件,我在其中使用angular JS进行一些操作,并且我在$ scope变量中有值。有没有办法从其他文件访问该变量并在svg圈内显示它

更新

'use strict';

.myButton {

    padding: 30px;
    display:block;
    background-color: green;
    color: white;
    text-align:center;
    position: absolute;
    top: 10px;
    right: 10px;

}

我需要从我的html模板中的custom指令中访问<div id="delightmeter"> {{delightScore}} <svg width='500px' height='300px' version='1.1' xmlns='http://www.w3.org/2000/svg'> <g class=''> <circle class='' cx='200' cy='60' r='20'></circle> <circle class="" cx='200' cy='60' r='17' ></circle> </g> </svg> </div> 变量。

1 个答案:

答案 0 :(得分:1)

我更新了plunker,以便将喜悦分数显示为SVG中的文本。

http://plnkr.co/edit/tWeNjM0H7F6npc2mM9L2?p=preview

由于您已在指令范围内获得了delightScore的值“score”,因此您可以将SVG模板中的值用作{{score}}

    <svg width='500px' height='300px' version='1.1' xmlns='http://www.w3.org/2000/svg'>

    <g>
        <text x='100' y='220' fill='black'>0</text>
        **<text x='195' y='220' fill='black'>{{score}}</text>**
        <text x='300' y='220' fill='black'>100</text>
        <path class='arc' id='arc1' d='' />
        <path class='arc' id='arc2' d='' />
        <path class='arc' id='arc3' d='' />
        <path class='arc' id='arc4' d='' />
        <path class='arc' id='arc5' d='' />
        <g class='needleset'>
            <circle class='needle-center' cx='200' cy='200' r='5'></circle>
            <path class='needle' d='M 195 198 L 200 100 L 205 202'></path>
            <circle class='needle-center' cx='200' cy='200' r='5'></circle>
        </g>
    </g>

</svg>