別の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：私はリンクがng-controller="myController"の内側になりたいと、ユーザーの選択に基づいて、私は同じページにHTMLページをロードします。 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ページの内容を同じページに読み込みます

答えて

関連する問題