동일한 페이지에 다른 html 페이지의 내용을로드하십시오.

사용자가 링크를 선택하면 다른 HTML의 내용을 사용자 별 선택과 동일한 페이지 내에로드하려고합니다. 제공된 링크는 컨트롤러 (myController) 안에 있습니다. 사용자 선택에 따라 red.html 및 green.html을로드하는 방법 아래의 js 코드는 링크가 ng-controller 안에 없으면 작동합니다.동일한 페이지에 다른 html 페이지의 내용을로드하십시오.

<!DOCTYPE html> 
<html> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script> 

<body ng-app="myApp"> 

<div ng-controller="myController"> 
<a href="#!red">Red</a> 
<a href="#!green">Green</a> 
<div ng-view></div> 
</div> 
<script> 
var app = angular.module("myApp", ["ngRoute"]); 
app.config(function($routeProvider) { 
    $routeProvider 
    .when("/", { 
     templateUrl : "main.htm" 
    }) 
    .when("/red", { 
     templateUrl : "red.html" 
    }) 
    .when("/green", { 
     templateUrl : "green.html" 
    }) 
    .when("/blue", { 
     templateUrl : "blue.html" 
    }); 
}); 
</script> 

</body> 
</html>

PS : 나 링크 제가 동일한 페이지의 HTML 페이지를로드 할 사용자 선택에 기초하여 내부 ng-controller="myController"하고 싶다. div에서 ng-controller를 제거하면 컨텐트가로드되지만 위의 코드와 같이 링크가 컨트롤러 내에 있도록하고 싶습니다.

출처

2017-09-28 joann

그것은 불분명하다, 질문을 업데이트하십시오 –

다음과 같이 컨트롤러를 구현하지 않았습니까?

//DEFINE THE CONTROLLER 
//////////////////////////////// 
app.controller("myController", function(){ 

});

다음 예제를 보면 완벽하게 작동합니다. 또한 설명 목적으로 templateUrl을 template으로 수정했습니다.

<!DOCTYPE html> 
 
<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script> 
 

 
<body ng-app="myApp"> 
 

 
    <div ng-controller="myController"> 
 
    <a href="#!red">Red</a> 
 
    <a href="#!green">Green</a> 
 
    <div ng-view></div> 
 
    </div> 
 
    <script> 
 
    var app = angular.module("myApp", ["ngRoute"]); 
 

 
    //DEFINE THE CONTROLLER 
 
    //////////////////////////////// 
 
    app.controller("myController", function() { 
 

 
    }); 
 

 
    app.config(function($routeProvider) { 
 
     $routeProvider 
 
     .when("/", { 
 
      template: "<h1>Home</h1>" 
 
     }) 
 
     .when("/red", { 
 
      template: "<h1>Red</h1>" 
 
     }) 
 
     .when("/green", { 
 
      template: "<h1>Green</h1>" 
 
     }) 
 
     .when("/blue", { 
 
      template: "<h1>Blue</h1>" 
 
     }); 
 
    }); 
 
    </script> 
 

 
</body> 
 

 
</html>

출처

2017-09-28 17:18:06 Thusitha

동일한 페이지에 다른 html 페이지의 내용을로드하십시오.

답변

관련 문제