我可以在Angular控制器中使用插值(不仅仅是在HTML中)吗?

时间:2014-08-29 19:43:24

标签: javascript html angularjs interpolation

我有以下HTML:

<i class="icon-copy" data-clipboard data-clipboard-text="{{codeSnippet}}" data-title="Click to copy the code to your clipboard" data-placement="top"></i>
<textarea class="code-snippet" ng-model="codeSnippet" readonly onclick="this.focus();this.select()">&lt;script src="{{scriptURL}}"&gt;&lt;/script&gt;&lt;button class="main-button" style="background-color:{{button.color || branding.color}};border-radius:{{button.skin.radius || '0'}};display:none;" data-id="{{product.id}}" data-key="{{key}}" data-color="{{button.color || branding.color}}"&gt;{{button.label || 'Click Here'}}&lt;/button&gt;</textarea>

它需要用户输入的一些值,并构建用户可以嵌入其网站的脚本(例如,按钮颜色,按钮标签,按钮样式等)。插值对此非常方便。

但是,我需要访问此插值字符串以供数据剪贴板文本使用,以便我可以将其复制到剪贴板。尝试使用ng-model绑定代码段的当前方法不起作用。

我不想使用普通的旧JavaScript连接在控制器中构建脚本标记,所以我想知道是否有一种方法可以使用插值来构建该字符串并将其添加到范围中。

我看了$ interpolate但是我不确定这是不是我需要的。 $ interpolate处理条件(如{{button.label ||'Click Here'}})?

$ compile看起来也可能与此相关,但我不确定如何将它们放在一起(对Angular来说是新的)。

希望这会成为一种感觉。谢谢你的任何建议!

1 个答案:

答案 0 :(得分:3)

发表评论后,您可以:

// Create a function to parse your input and return an interpolated string
var getter = $interpolate('<script ng-src="{{scriptURL}}"></script>');
var value = {
    scriptURL: 'myScript.js'
};
// Evaluate the template with your values and add it to the $scope.
$scope.snippet = getter(value);