angularjs - 动态添加 ng 元素

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 绑定到对象的动态 Url 属性，例如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

如果要绑定动态 url，href则可以在事件中操作 URLng-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>