web-dev-qa-db-ja.com

AngularJS：インクルードURLと動的URL

HTMLフラグメントをロードするためにngIncludeディレクティブを使用しています。今、私は動的URLを渡すための最良の方法を探しています。文字列を連結してURLを作成できることはわかっています。

<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に渡すより良い方法はありますか？

angularjsangularjs-directiveangularjs-ng-include
13
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

33
jessegavin

@jessegavinはこのコードを使用する方が良い

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

この方法を使用する場合

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

templateUrlは数回呼び出します。 （3回）。 console.logを試してください。 $ scope変数が原因だと思います

$ scope.templateUrl = function（）{var url = "/ foo /" + $ scope.fooId + "/ bar /" + $ scope.barId + "/ baz /" + $ scope.bazId; console.log（url）; URLを返す; }

2
Anja Ishmukhametova