<a href=""> links from compiled html</a>的角度指令

时间:2014-03-08 09:00:15

标签: javascript angularjs

我正在尝试使用angular实现API。 API位于this location

所以,我有一个控制器,通过API提供的服务向我提供数据。 问题是API通过这样的链接向我提供html

<a href="/100"></a>
<a href="/101"></a>

简单地说,我想重写这些链接,以便他们再次重新路由到我的控制器。像这样。

<a href="#100"></a>
<a href="#101"></a>

我的计划是为传入的html创建一个指令,然后编译它以便Angular知道它。

textTvApp.directive('dynamic', function ($compile) {
  return {
    restrict: 'A',
    replace: true,
    link: function (scope, ele, attrs) {
      scope.$watch(attrs.dynamic, function(html) {          
        ele.html(html);
        $compile(ele.contents())(scope);
      });
    }
  };
});

视图

<div ng-repeat="info in textTvInfo">    
    <div ng-repeat="content in info.content" ng-bind-html="content">        
        <div dynamic="content">

        </div>
    </div>
</div>

这似乎工作正常。 我的下一个计划是为a-tags替换另一个指令,但我对该指令有疑问。

我的错误指令现在看起来像这样。想法是测试重写。但似乎没有发生任何事情。

textTvApp.directive('a', function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<h1>{{result}}</h1>',
        link: function(scope, elem, attrs) {            
            scope.result = "#100";
        }        
   };
});

1 个答案:

答案 0 :(得分:1)

您可以使用角度jquery函数来获取html内容并使用这些方法编辑a的href属性...

我在这里为你http://plnkr.co/edit/WsJO0QXShAHXuXCiq5sl?p=preview

创建了一个plunker

顺便说一句,anchor已经在angularjs core http://docs.angularjs.org/api/ng/directive/a

中注册了指令

我不知道你是否可以创建一个具有该名称的指令......