AngularJS: URL bao gồm và động

Question

Tôi đang sử dụng chỉ thị ngInclude để tải các đoạn HTML. Bây giờ tôi đang tìm cách tốt nhất để chuyển một URL động. Tôi biết tôi có thể tạo URL có chuỗi nối:

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

Trong mắt tôi, điều này hơi xấu xí. Ví dụ:

ngHref và ngSrc, chấp nhận các URL có chứa đánh dấu {{}}. IMHO cú pháp này sạch hơn nhiều:

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

Có cách nào tốt hơn để truyền các URL động để bao gồm không?

Answer 1

Không chắc chắn nếu điều này "tốt hơn" hay không, nhưng bạn có thể tạo một chức năng trên phạm vi của bạn để đóng gói này.

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; 
    } 
}); 

Sau đó, bạn sẽ sử dụng nó như vậy ...

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

Dưới đây là một ví dụ sống của loại hình này điều: http://plnkr.co/edit/Lu3icqPgg1dpNCj6a3Dn?p=preview

Answer 2

@jessegavin là sử dụng tốt hơn mã này

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

nếu bạn sử dụng cách này

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

mẫuUrl gọi một vài lần. (3 lần). thử console.log. tôi nghĩ vì phạm vi $ varibles

$ scope.templateUrl = function() { var url = "/ foo /" + $ scope.fooId + "/ bar /" + $ scope.barId + "/ baz/"+ $ scope.bazId; console.log (url); url trả về; }