Question

如果我想在元素中添加动态创建的ng-href，我怎么能让它像通常的ng-href一样？

<a test-href="/link">Test link</a>

指令：

app.directive("testHref", function() {
  return {
    link: function(scope, elem, attr) {
      var newlink = attr.dbHref + "/additional/parameters";
      attr.$set("ng-href", newlink);
    }
  };
});

这会产生<a test-href="/link" ng-href="/link/additional/parameters">Test link</a>，但我怎样才能让ng-href表现得如此？

Answer 1

http://jsfiddle.net/UnpSH/

app.directive("testHref", function($compile) {
  return {
    link: function(scope, elem, attr) {
      var newlink = attr.dbHref + "/additional/parameters";
      attr.$set("ng-href", newlink);
      elem.removeAttr('test-href'); // prevent recursion
      $compile(elem)(scope); // compile it again
    }
  };
});

不确定要实现的目标，但应使用ng-href = "/path/{{scopeVariable}}"之类的内容来动态更改链接。

Answer 2

您可以将ng-href绑定到对象的动态网址属性，例如ng-href="{DynamicUrl}"

http://docs.angularjs.org/api/ng.directive:ngHref

如果要构建一个需要动态添加angulerjs指令的指令，则应使用$ compile来获得适当的结果。

Answer 3

我认为您不需要编写自定义指令来为href创建动态URL。您可以使用ng-href和范围参数绑定。

<a ng-href="/path/{{dynamic_var_on_scope}}/123/?p={{var2}}"> Click Here </a>

Answer 4

如果您想使用href绑定动态网址，则可以在ng-click或ng-mousedown事件中操纵您的网址并绑定到目标元素。

JS：

var goToDetailPage = function (event, id) {
    var newState = $state.href('DetailView', {id: id});
    jQuery(event.target).attr('href',newState);
};

HTML：

<a ng-mousedown="goToDetailPage($event, id)"> Click Here </a>

动态添加ng元素

4 个答案: