angularjs $routeProvider template 함수 및 매개 변수 해혹
if it is a function, it will be called with the following parameters:
{Array.<Object>} - route parameters extracted from the current$location.path() by applying the current route
읽기에 상당히 까다로워서 무슨 뜻인지 이해하기도 쉽지 않다.
간단하게 말하자면template와temlateUrl의 값은 하나의 함수일 수 있으며 매개 변수를 가지고 각각 하나의 html 스크립트와 하나의 html 스크립트 파일의 URL을 되돌려줄 수 있다.파라미터가 없는 상황은 간단하니 대응하는 데이터를 되돌려주면 된다.그럼 매개 변수가 있는 상황은요, 매개 변수는 무엇입니까?위에서 언급한 것은 루트 파라미터입니다.처음에 $routeParams인 줄 알고 $routeParams를 매개 변수로 삼았습니다.사실 함수를 정의할 때 우리가 전달하는 매개 변수는 사실 형삼이다.그럼 실삼은 어디에서 왔습니까?이 함수는 사실 백그라운드에서 실행되고 angularJS가 실삼을 함수에 전달한다. 물론 실삼을 인용하기 위해서는 함수에 형삼을 설정해야 한다.그럼 실삼은 어떻게 왔어요?위에서 언급한 현재 루트의 $location이 있습니다.path().path 설정 세션에서 path 파라미터가 이름 그룹 (named group) 을 사용하면 파라미터가 추출되어 $routeParams에 저장됩니다.path에서 추출된 이 매개 변수가 바로 이곳의 실삼입니다.
코드 보기:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body ng-app="Main">
<div ng-controller="MainController">
<div ng-view></div>
</div>
</body>
</html>
<script src="scripts/angular.min.js" type="text/javascript"></script>
<script src="scripts/angular-route.min.js" type="text/javascript"></script>
<script type="text/javascript">
function template(data)
{
console.log(data);
return '<span>{{path}}</span><br /><span>{{url}}</span>';
}
var app = angular.module('Main', ['ngRoute']);
app.controller('MainController', function ($scope, $location) {
$location.url('/test/1#?a=1#hash');
$scope.url = $location.url();
}).controller('controllor', function ($scope, $location, $route) {
$scope.path = $location.path();
});
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/test/:test', {
template: template,
controller: 'controllor'
});
}]);
</script>
실행 후 콘솔에서 {"test":"1"}을 출력할 수 있습니다.
위의 글은 역할 영역의 문제 ($scope.url) 도 보여 줍니다.전역 함수 재angularjs의 응용
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
AngularJS의 ng-options best practise쓸데없는 말은 하지 말고 바로 코드를 찍어라. 리소스를api에 직접 전달하지 말고 문자열이나 정형(예를 들어 귀속된ng-model="selected")을 권장합니다 angular에서 생성된 의value가 무엇인지, ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.