我在運行我的第一個AngularJS應用程序時遇到了一些問題。當我運行我的應用程序時，我的索引中的所有對象都正確顯示。當我點擊我的超鏈接移動到view-2時，所有對象都顯示在HTML上，如純文本{{object.property}}我做錯了什麼？AngularJS控制器只能在第一個視圖上工作

這是我的index.html：

<DOCTYPE html> 
<html ng-app="tutorialApp"> 
<head> 
<meta charset="UTF-8"> 
<title> Tutorial App</title> 
<script src="lib/angular.min.js"></script> 
<script src="lib/angular-route.min.js"></script> 
<script src="js/app.js"></script> 
<script src="js/controllers/MyController.js"></script> 
</head> 
<body> 

<div ng-view></div> 

</body> 
</html> 
</DOCTYPE>

這是我app.js：

var app = angular.module('tutorialApp', ["ngRoute", "MyControllerModule"]) 

    app.config(function ($routeProvider){ 

     $routeProvider 

      .when("/", { 
       controller: "MyController", 
       templateUrl: "views/one.html" 
      }) 


      .when("/two", { 
       controller: "ControllerTwo", 
       templateUrl: "views/two.html" 
      }) 

      .otherwise({ 
       redirectTo: "/" 
      }); 
    });

這是我MyController.js：

angular.module("MyControllerModule", []) 

.controller("MyController", ["$scope", function($scope){ 

$scope.myFirstObject = {}; 
$scope.myFirstObject.title = "Main Page"; 
$scope.myFirstObject.subTitle = "Sub Title"; 

$scope.myFirstObject.bindOutput = 13; 

$scope.myFirstObject.firstname = "Wheelchair"; 
$scope.myFirstObject.lastname = "Terminator"; 

$scope.timesTwo = function(){ 
    $scope.myFirstObject.bindOutput *= 2; 
} 

}]) 

.directive("myFirstDirective", function(){ 
    return { 
     restrict: "E", 
     template: "<div>Hello how are you?</div>" 
    } 
}) 

.controller("ControllerTwo", ["$scope", function($scope) { 
    $scope.testObject = {}; 
    $scope.testObject.doSomething = "TEST TEST TEST TEST TEST!"; 

} 
]);

這是我的/ views/one.html：

<h1>{{myFirstObject.title}}</h1> 
<h2>{{myFirstObject.subTitle}}</h2> 

<p>Number: {{2 + 2}}</p> 
<p>String: {{myFirstObject.firstname + " " + myFirstObject.lastname}}</p> 
<p><b>Multiply a number by two: {{myFirstObject.bindOutput | currency}}</b></p> 

<button ng-click="timesTwo()">CLICK TO MULTIPLY</button><br> 

<br> 
<label>First Name:</label> 
<input ng-model="myFirstObject.firstname"> 
<br> 
<label>Last Name:</label> 
<input ng-model="myFirstObject.lastname"> 
<br> 
<a href="views/two.html">CLICK HERE FOR SECOND VIEW</a> 
<br> 
<br> 
<br> 
<my-first-directive></my-first-directive>

這是我/views/two.html

<h1>Second View</h1> 
<h2>this is the second view...</h2> 
<br> 
<br> 

<p>Call object string: {{testObject.doSomething}}</p>

來源

2017-02-21 eekje87

按'f12'和'開放console'，你有一些錯誤，並粘貼在問題的錯誤。 – Sravan

當我從one.html轉換到two.html（firefox調試器） – eekje87

打開控制檯並刷新頁面時，它沒有顯示控制檯中的任何內容，您將看到錯誤 – Sravan

更改href路由。不是HTML頁面。

<a href="views/two.html">CLICK HERE FOR SECOND VIEW</a>

這應該是

<a href="#/two">CLICK HERE FOR SECOND VIEW</a>

正如你在的問題，調用新的html網頁加載到瀏覽器中一樣。不是角度應用程序的模板。所以，所有未知的東西，如{{object.property}}發生。

來源

2017-02-21 11:47:53 SaiUnique

我完全按照你所說的做，當我點擊超鏈接時，在同一頁面上，但瀏覽器的網址更改爲：http：// localhost：8080 /＃！/＃％2Ftwo – eekje87

試試這個：'href =「＃！/ two」' – SaiUnique

YES IT WORKED！哇感謝百萬..終於可以繼續我的教程：D – eekje87

使用，

<a href="#two">CLICK HERE FOR SECOND VIEW</a>

觀察，href="#two"

<h1>{{myFirstObject.title}}</h1> 
<h2>{{myFirstObject.subTitle}}</h2> 

<p>Number: {{2 + 2}}</p> 
<p>String: {{myFirstObject.firstname + " " + myFirstObject.lastname}}</p> 
<p><b>Multiply a number by two: {{myFirstObject.bindOutput | currency}}</b></p> 

<button ng-click="timesTwo()">CLICK TO MULTIPLY</button><br> 

<br> 
<label>First Name:</label> 
<input ng-model="myFirstObject.firstname"> 
<br> 
<label>Last Name:</label> 
<input ng-model="myFirstObject.lastname"> 
<br> 
<a href="#two">CLICK HERE FOR SECOND VIEW</a> 
<br> 
<br> 
<br> 
<my-first-directive></my-first-directive>

Check this reference

編輯：

你似乎有問題#網址

解決方案：

HTML5模式

配置：

$routeProvider 
    .when('/two', { 
    templateUrl: 'views/two.html', 
    }); 
$locationProvider 
    .html5Mode(true);

你應該在HTML文件設置的基本

<html> 
    <head> 
    <base href="/"> 
    </head> 
</html>

在這種模式下你可以使用未經＃鏈接在HTML文件中

<a href="/two">link</a>

例如：

http://test.com/base/two

來源

2017-02-21 12:09:27 Sravan

只留在同一視圖中瀏覽器url更改爲：http：// localhost：8080 /＃！/＃two – eekje87

@ eekje87，檢查我編輯的答案， – Sravan

AngularJS控制器只能在第一個視圖上工作

回答

HTML5模式

相關問題