動態添加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屬性像

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

如果您正在構建需要添加動態angulerjs指令一個指令，就應使用$編譯得到相應的結果。

Answer 3

我不認爲你需要編寫一個自定義指令有一個動態的網址爲href。您可以使用ng-href和範圍參數綁定。

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

Answer 4

如果你想一個動態的URL綁定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>