AngularJS : ng 포함 및 동적 URL

ngInclude 지시어를 사용하여 HTML 조각을로드합니다. 이제 동적 URL을 전달하는 가장 좋은 방법을 찾고 있습니다. 문자열 연결을 사용하여 URL을 만들 수 있다는 것을 알고 있습니다.AngularJS : ng 포함 및 동적 URL

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

내 눈에는 이것이보기 흉하게 들립니다.

ngHref 및예를 들어, {{}} 마크 업을 포함하는 URL을 수락하십시오. IMHO이 구문은 훨씬 더 깨끗합니다.

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

ngInclude에 동적 URL을 전달하는 더 좋은 방법이 있습니까?

출처

2013-05-17 Michael Weiss

이 방법이 "더 우수"한지 확실하지 않지만 범위를 캡슐화하는 기능을 만들 수 있습니다. http://plnkr.co/edit/Lu3icqPgg1dpNCj6a3Dn?p=preview

출처

2013-05-17 19:36:33 jessegavin

콜백 기능이 필요합니까? 직접 $ scope.templateUrl = "/ foo /"...에 영향을주지 않는 이유는 무엇입니까? – MaximeBernard

콜백이 유일한 방법은 아닙니다. scope에 확실히'templateUrl' 속성을 만들 수 있습니다. 'fooId','barId','bazId'가 변경 될 때마다'templateUrl'의 값을 업데이트하는 일관된 방법이 필요합니다. – jessegavin

그래서 콜백을 사용하면 직접 "templateUrl"에 영향을주는 반면 "templateUrl"값은 "자동으로"업데이트됩니다. – MaximeBernard

@jessegavin이 코드

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

에게 더 나은 사용을이다 :

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>

물건의 이러한 종류의 살아있는 예입니다 ...과 같이 사용할 것

이 방법을 사용하는 경우

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

templateUrl이 몇 번 호출됩니다. (3 회). console.log를 시도하십시오. 나는 $ 범위 변수 때문에 생각한다.

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

출처

2016-08-23 08:08:36 miukki

AngularJS : ng 포함 및 동적 URL

답변

관련 문제