我正在尝试在 Angular 中创建一个指令,该指令采用一组属性来操作某些文本并将其输出到元素。
我遇到的问题是我希望将一些文本包含在 ng-click 中,该函数从作用域中调用一个函数,最终将打开一个对话框。
我在这里创建了一个非常简单的示例,一旦工作,我就可以对其进行扩展: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);
}
}
});
最佳答案
看看我的 fiddle 叉:http://jsfiddle.net/joakimbeng/aVjtv/1/ 要使其工作,您需要使用 $compile 提供程序。我的例子不太清楚,但我希望你能明白我的意思:)
添加 $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
...
关于javascript - AngularJS 指令用 ng-click 替换文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16397707/