gpt4 book ai didi

javascript - ngRoute 不工作。我做错了什么吗

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

下面是我尝试执行的代码,但它没有路由到 View1。在 View1 中,我只是循环遍历 Simplecontroller 的每个元素。

请帮忙。

<!DOCTYPE html>
<html data-ng-app="App">
<head>
<title>a</title>
</head>
<body>
<script src="Scripts/angular.min.js" type="text/javascript"></script>
<script src="Scripts/angular-route.min.js" type="text/javascript"></script>
<script type="text/javascript">

var App = angular.module('App', ['ngRoute']);
App.config(function ($routeProvider) {
$routeProvider
.when('/', { templateUrl: 'Partials/View1.htm', controller:'SimpleController' })
.when('/partial2', { templateUrl: 'Partials/View2.htm', controller: 'SimpleController' })
.otherwise({ redirectTo: '/AJTest' });
});

App.controller('SimpleController', function ($scope) {
$scope.customers =
[
{ name: 'a', city: 'a' },
{ name: 'b', city: 'b' },
{ name: 'c', city: 'c' },
{ name: 'd', city: 'd' }
];
$scope.addCustomer = function () {
$scope.customers.push({ name: $scope.newCustomer.name, city: $scope.newCustomer.city });
}
});

</script>
<div data-ng-controller="SimpleController">
Name :<br />
<input type="text" data-ng-model="name" /> {{ name }}
<ul>
<li data-ng-repeat="cust in customers | filter:name | orderBy:city">{{ cust.name + ' ' + cust.city}} </li>
</ul>
</div>
</body>
</html>

提前致谢。

最佳答案

总而言之,您发布的所有“代码”都没有意义,首先,如果您希望使用 ngRoute 并使用模板填充 View ,则您需要在某处使用 ng-view,其次代码执行生成预期的 SimpleController在主应用程序中输出,而不是在 View 中...无论如何...这是一个 Plunker,它可以完成我认为您正在尝试做的事情:

http://plnkr.co/edit/oVSHzzjG3SrvpNsDkvDS?p=preview

应用:

var App = angular.module('App', ['ngRoute']);

App.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'view1.html',
controller: 'View1Controller'
})
.when('/partial2', {
templateUrl: 'view2.html',
controller: 'View2Controller'
})
.otherwise({
redirectTo: '/404'
});
});

App.controller('View1Controller', function($scope) {
$scope.customers = [{
name: 'a',
city: 'a'
}, {
name: 'b',
city: 'b'
}, {
name: 'c',
city: 'c'
}, {
name: 'd',
city: 'd'
}];
$scope.addCustomer = function() {
$scope.customers.push({
name: $scope.newCustomer.name,
city: $scope.newCustomer.city
});
}
});

App.controller('View2Controller', function($scope) {
$scope.hello = "BOOOO!";
});

主页:

<!DOCTYPE html>
<html ng-app="App">
<body>


<a href="#/">VIEW 1</a> - <a href="#/partial2">VIEW 2</a>


<div ng-view></div>

<script src="https://code.angularjs.org/1.2.16/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.16/angular-route.min.js"></script>
<script src="script.js" ></script>
</body>

</html>

View 1:

HELLO FROM VIEW 1:

<br />
<br />Running through items in the view::
<br />Name :
<br />
<input type="text" data-ng-model="name" />{{ name }}
<ul>
<li data-ng-repeat="cust in customers | filter:name | orderBy:city">{{ cust.name + ' ' + cust.city}}</li>
</ul>

关于javascript - ngRoute 不工作。我做错了什么吗,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23075319/

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