gpt4 book ai didi

javascript - AngularJS 无法连接 Controller 实例

转载 作者:行者123 更新时间:2023-12-02 16:44:29 26 4
gpt4 key购买 nike

我正在使用 angularJS 创建一个 simpleApp,不幸的是我不知道为什么它一直显示空白。我猜 AngularJS 未能粘合我的 Controller 和 View 。

索引.html

<!DOCTYPE html>
<html data-ng-app="simpleApp">
<head>
</head>
<body>
<div data-ng-view="">
</div>

<script src="/app/controllers/controllers.js"></script>
<script src="/app/services/customerService.js"></script>
<script src="/app/app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
</body>
</html>

App.js

var app = angular.module("simpleApp", []);

app.config(function($routeProvider) {
$routeProvider
.when("/", { controller: "simpleController", templateUrl: "/app/partials/view1.html" })
.when("/view2", { controller: "simpleController", templateUrl: "/app/partials/view2.html" })
.otherwise({ redirectTo: "/" });
});

Controller .js

app.controller("simpleController", function($scope) {
$scope.customers = [
{ Name: "Dave Jones", City: "Phoenix" }
, { Name: "Jamie Riley", City: "Atlanta" }
, { Name: "Heedy Walhin", City: "Chandler" }
, { Name: "Thomas Winter", City: "Seattle" }
];
});

View1.html

<div>
<input type="text" data-ng-model="filter.name"/>
<ul>
<li data-ng-repeat="cust in customers | filter: filter.name | orderBy: 'Name'">
{{ cust.Name | uppercase }} - {{ cust.City | lowercase }}
</li>
</ul>
<br/>
Customer Name:
<br/>
<input type="text" data-ng-model="newCustomer.Name"/>
<input type="text" data-ng-model="newCustomer.City"/>
<br/>
<input type="button" data-ng-click="addNewCustomer"/>
<a href="#/view2">View 2</a>
</div>

View2.html

<div>
<ul>
<li data-ng-repeat="cust in customers">
{{ cust.Name | lowercase }} - {{ cust.City | upppercase }}
</li>
</ul>
</div>

有什么想法吗?

最佳答案

ng-route 模块不是核心 angular.js 文件的一部分,您需要单独包含它。另外js文件的顺序也需要改变

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.4/angular-route.js"></script>
<script src="/app/app.js"></script>
<script src="/app/controllers/controllers.js"></script>
<script src="/app/services/customerService.js"></script>

然后

var app = angular.module("simpleApp", ['ngRoute']);

此外,您的过滤器名称大写错误

{{ cust.Name | lowercase }} - {{ cust.City | uppercase }}

演示:Fiddle

关于javascript - AngularJS 无法连接 Controller 实例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27221016/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com