AngularJS：ngInclude和動態網址

我使用ngInclude指令來加載HTML片段。現在我正在尋找傳遞動態網址的最佳方式。我知道我可以使用字符串連接創建URL：AngularJS：ngInclude和動態網址

<ng-include src="'/foo/' + fooId + '/bar/' + barId + '/baz/' + bazId"></ng-include>

在我眼中，這有點難看。

ngHref和ngSrc例如，接受包含{{}}標記的URL。恕我直言，這個語法更清潔：

<img ng-src="/foo/{{fooId}}/bar/{{barId}}/baz/{{bazId}}"/> 
<a ng-href="/foo/{{fooId}}/bar/{{barId}}/baz/{{bazId}}"/>

有沒有更好的方法來將動態URL傳遞給ngInclude？

來源

2013-05-17 Michael Weiss

不知道這是否「更好」，但您可以在您的作用域上創建一個函數來封裝它。

app.controller("MyCtrl", function($scope) { 
    $scope.fooId = "123"; 
    $scope.barId = "abc"; 
    $scope.bazId = "abc"; 

    $scope.templateUrl = function() { 
    return "/foo/"+ $scope.fooId +"/bar/"+ $scope.barId +"/baz/"+ $scope.bazId; 
    } 
});

那麼你可以使用它像這樣...

<div ng-controller="MyCtrl"> 
    <ng-include src="templateUrl()"></ng-include> 
</div>

下面是這種類型的事情的一個活生生的例子：http://plnkr.co/edit/Lu3icqPgg1dpNCj6a3Dn?p=preview

來源

2013-05-17 19:36:33 jessegavin

是否需要回調函數？爲什麼不直接影響$ scope.templateUrl =「/ foo /」...？ – MaximeBernard

回調不是唯一的方法。你當然可以在範圍上創建一個'templateUrl'屬性。只要'fooId'，'barId'，'bazId'改變，你就需要一種更新'templateUrl'值的一致方法。 – jessegavin

因此，使用回調將「自動」更新templateUrl的值，而直接影響templateUrl不會？ – MaximeBernard

@jessegavin是更好地利用這個代碼

<ng-include ng-init="tmplUrl = templateUrl();" src="tmplUrl"></ng-include>

如果你會用這種方式

<ng-include src="templateUrl()"></ng-include>

templateUrl調用幾次。（3次）。嘗試console.log。我認爲是因爲$ scope varibles

$ scope.templateUrl = function（）{ var url =「/ foo /」+ $ scope.fooId +「/ bar /」+ $ scope.barId +「/ baz/「+ $ scope.bazId; console.log（url）; 返回網址; }

來源

2016-08-23 08:08:36 miukki

AngularJS：ngInclude和動態網址

回答

相關問題