Question

我正在尝试将ui-router链接放在指令“template”中。

问题：点击链接不会执行任何操作。

.directive('hashfinder', function() {
  return {
    restrict: 'A',
    link: function($scope, $element, $attrs) {
      var content = $attrs.content;

      var html = content.replace(/(^|\W)(#[a-z\d][\w-]*)/ig, function(match, p1, p2, offset) {
        var id = "r" + Math.random();

        // Here: ui-sref doesn't work.
        return p1 + '<a href="#" ui-sref="app.lounge" class="eva-hash-highlight2">' + p2 + '</a>';
      });
      $element.html(html);
    }
  }
})

正在使用的地方：

// inside of ng-repeat
<div ng-if="someBool">
    Published a snippet 
    <span class="eva-event-snipContent" content="{{ event._chirp._comments[0].content }}" hashfinder></span>
 </div>

加入@ 4:12 pm

使用@ softvar的答案，我收到了这个错误：

jqLite不支持通过选择器查找元素！请参阅：http://docs.angularjs.org/api/angular.element

Answer 1

原因是未编译sref-url元素。基本上你需要编译HTML字符串然后追加它。

.directive('hashfinder', function($compile) {
return {
restrict: 'A',
link: function($scope, $element, $attrs) {
  var content = $attrs.content;

  var html = content.replace(/(^|\W)(#[a-z\d][\w-]*)/ig, function(match, p1, p2, offset) {
    var id = "r" + Math.random();

    // Here: ui-sref doesn't work.
    return p1 + '<a href="#" ui-sref="app.lounge" class="eva-hash-highlight2">' + p2 + '</a>';
  });

  $element.html($compile(angular.element(html))($scope).html());
}

} }）

Answer 2

你需要编译HTML字符串，因为它已经在角色之外进行了更新。范围。使用$compile服务。

.directive('hashfinder', function($compile) {
  return {
    restrict: 'A',
    link: function($scope, $element, $attrs) {
      var content = $attrs.content;

      var html = content.replace(/(^|\W)(#[a-z\d][\w-]*)/ig, function(match, p1, p2, offset) {
        var id = "r" + Math.random();

        // Here: ui-sref doesn't work.
        return p1 + '<a href="#" ui-sref="app.lounge" class="eva-hash-highlight2">' + p2 + '</a>';
      });
       $element.html($compile(angular.element(html))($scope));
    }
  }
})

Angular：ui-router链接在指令

2 个答案: