[英]AngularJS directive to replace text with ng-click in it
I am trying to create a directive in Angular that takes a set of properties manipulates the some text and outputs it to the element. 我试图在Angular中创建一条指令,该指令采用一组属性来操纵一些文本并将其输出到元素。
The problem i'm having is I want to have some of the text wrapped in a ng-click which is to call a function from the scope that will in the end open a dialog box. 我遇到的问题是我想将一些文本包装在ng-click中,这是要从作用域调用函数,最终将打开一个对话框。
I have created a very simple example here which once working will let me expand on it: http://jsfiddle.net/BEuvE/ 我在这里创建了一个非常简单的示例,该示例一旦工作将使我对其进行扩展: http : //jsfiddle.net/BEuvE/
app.directive('parseString', function() {
return {
restrict: 'A',
scope: { props: '=parseString' },
link: function compile(scope, element, attrs) {
var nameHTML = '<a href="#" ng-click="helloPerson('+scope.props.name+')">'
+scope.props.name+'</a>';
var html = scope.props.text.replace('world', nameHTML);
element.html(html);
}
}
});
Take a look at my fork of your fiddle: http://jsfiddle.net/joakimbeng/aVjtv/1/ To make it work you need to use the $compile provider. 看看我的小提琴叉子: http : //jsfiddle.net/joakimbeng/aVjtv/1/要使其正常工作,您需要使用$ compile提供程序。 My example isn't that clean, but I hope you get the point :)
我的例子不是很干净,但我希望你明白了:)
Add the $compile dependency and compile your changed html: 添加$ compile依赖项并编译更改后的html:
app.directive('parseUrl', function($compile) {
...
link: function compile(scope, element, attrs, controller) {
angular.forEach(value.match(urlPattern), function(url) {
value = value.replace(url, "<a target=\"" + scope.props.target + "\" ng-click='onClick()'>" + url +"</a>");
});
// The wrapping of the content in a div is required because
// Angular wants only one element at root level
var content = angular.element('<div></div>').html(value).contents();
var compiled = $compile(content);
element.html(''); // Clearing old text
element.append(content); // Using append because "content" is DOMElements now, instead of a string
scope.onClick= function () {
console.log('clicked');
};
compiled(scope); // Linking compiled elements to scope
...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.