Javascript AngularJS控制器仅在第一视图上工作_Javascript_Angularjs

Javascript AngularJS控制器仅在第一视图上工作

javascript angularjs

Javascript AngularJS控制器仅在第一视图上工作,javascript,angularjs,Javascript,Angularjs,我在运行我的第一个AngularJS应用程序时遇到一些问题。当我运行应用程序时，索引上的所有对象都会正确显示。当我点击我的超链接移动到view-2时，所有对象都显示在HTML上，比如纯文本{{{object.property}}，我做错了什么这是我的index.html： <DOCTYPE html> <html ng-app="tutorialApp"> <head> <meta charset="UTF-8"> <title> T

我在运行我的第一个AngularJS应用程序时遇到一些问题。当我运行应用程序时，索引上的所有对象都会正确显示。当我点击我的超链接移动到view-2时，所有对象都显示在HTML上，比如纯文本{{{object.property}}，我做错了什么

这是我的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>

这是我的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!";

}
]);

angular.module（“MyControllerModule”，[]）
.controller（“MyController”，[“$scope”，函数（$scope）{
$scope.myFirstObject={}；
$scope.myFirstObject.title=“主页”；
$scope.myFirstObject.subTitle=“子标题”；
$scope.myFirstObject.bindOutput=13；
$scope.myFirstObject.firstname=“轮椅”；
$scope.myFirstObject.lastname=“终止符”；
$scope.timestow=函数（）{
$scope.myFirstObject.bindOutput*=2；
}
}])
.directive（“myFirstDirective”，function（）{
返回{
限制：“E”，
模板：“你好，你好吗？”
}
})
.controller（“ControllerTwo”，[“$scope”，函数（$scope）{
$scope.testObject={}；
$scope.testObject.doSomething=“测试！”；
}
]);

这是my/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>

{{myFirstObject.title}
{{myFirstObject.subTitle}
编号：{{2+2}
字符串：{{myFirstObject.firstname+“”+myFirstObject.lastname}
将一个数字乘以二：{myFirstObject.bindOutput | currency}
单击以相乘



名字：


姓氏：

这是my/views/two.html

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

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

第二视图
这是第二种观点。。。




调用对象字符串：{{testObject.doSomething}

将

href

更改为路由。不是html页面

这应该是

正如您在问题中所做的那样，这将调用新的html页面以加载到浏览器中。不是angular应用程序的模板。因此，所有未知的东西，如

{{{object.property}}

都会发生。

使用

注意，

href=“#两个”

您应该在HTML文件中设置基

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

按

f12

和

open console

，您有一些错误，并将该错误粘贴到问题中。当我从one.html切换到two.html（firefox debugger）打开控制台并刷新页面时，控制台中没有显示任何内容，您将看到错误请更改为您的错误。html@PawanGupta当我这样做并单击one.html中的hyperlink时，它会将我带到一个空白的白色页面，浏览器中的url变成localhost:8080/two我完全按照您所说的做了，当我单击hyperlink时，现在没有任何事情发生，但浏览器url会变为：尝试以下操作：

href=“#！/two”

是的，它成功了！哇，非常感谢。。终于可以继续我的教程了：DGlad它帮助了你。如果这真的对你有帮助，请接受我的回答。

<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>

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

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

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

http://test.com/base/two