AngularJS:ngInclude和动态URL

我正在使用

ngInclude

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

在我看来这有点难看

ngHref

和

ngSrc

例如，接受包含

{{}

标记的URL。IMHO此语法更清晰：

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

不确定这是否“更好”，但您可以在作用域上创建一个函数来封装它

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>

---

这里有一个此类事情的实例：

@jessegavin最好使用此代码

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

如果你愿意用这种方式

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

templateUrl调用了几次。（3次）。试试console.log。我想是因为$scope变量

$scope.templateUrl=函数（）{ var url=“/foo/”++$scope.fooId+”/bar/“++$scope.barId+”/baz/“++$scope.bazId； console.log（url）； 返回url；

---

}

是否需要回调函数？为什么不直接影响$scope.templateUrl=“/foo/”？回调不是唯一的方法。您当然可以在scope上创建

templateUrl

属性。您只需要使用一致的方法随时更新

templateUrl

的值

fooId

，

barId

，

bazId

。因此，使用回调将“自动”更新templateUrl的值，而直接影响templateUrl则不会？这是不正确的。无论采用哪种方法，都可以获得相同的结果。我认为在这里使用函数更容易。@jessegavin我尝试在暂停后加载页面在这种情况下它不起作用，我需要实现的是，根据服务器的特定响应加载页面，所以我创建了一个小暂停来进行测试$scope.templateUrl=function（）{setTimeout（function（）{console.log（“5秒后记录”）；返回“app/rsa/summary/summary.html”；}，5000）；}