14

我正在使用该ngInclude指令来加载 HTML 片段。现在我正在寻找传递动态 URL 的最佳方式。我知道我可以使用字符串连接创建 URL：

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

在我看来，这有点丑陋。

ngHrefngSrc例如，接受包含标记{{}}的 URL。恕我直言，这种语法更简洁：

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

有没有更好的方法将动态 URL 传递给 ngInclude？

4

2 回答 2

34

不确定这是否“更好”，但您可以在您的范围内创建一个函数来封装它。

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-17T19:36:33.897 回答
4

@jessegavin 最好使用此代码

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

如果你会用这种方式

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

templateUrl 调用了几次。（3次）。尝试控制台.log。我认为是因为 $scope 变量

$scope.templateUrl = function() { var url = "/foo/"+ $scope.fooId +"/bar/"+ $scope.barId +"/baz/"+ $scope.bazId; 控制台.log(url); 返回网址；}

于 2016-08-23T08:08:36.090 回答