AngularJS路由未绑定控制器
AngularJS Routing is not Binding the Controller
我正试图在AngularJS中创建一个简单的应用程序,但由于某种原因,我无法理解为什么我的路由没有将控制器绑定到模板。当我点击我的链接时,它们会把我带到正确的路径,代码会被执行,模板会显示在data-ng-view指令中。没有发生的是模板没有绑定到networkController?我已经想了一段时间了,我被卡住了,如果有任何帮助都将不胜感激。
谢谢!
这是我所有的代码;
app.js
'use strict';
var habeoApp = angular.module('habeo', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider.when(
'/network/:id',
{
templateUrl: '/app/templates/networkDetails.html',
controller: NetworkCntl
}
);
});
function NetworkCntl($scope, $routeParams) {
$scope.name = "networkController";
$scope.params = $routeParams;
}
networkListController.js
'use strict';
habeoApp.controller('networkListController',
function networkListController($scope) {
$scope.networks = [
{ name: 'Data Network', activeClass: "", url: "#/network/1" },
{ name: 'Voip', activeClass: "", url: "#/network/2" },
{ name: 'Servers', activeClass: "", url: "#/network/3" },
{ name: 'Clients', activeClass: "", url: "#/network/4" }
];
$scope.selectNetwork = function(network) {
clearSelectedNetwork();
network.activeClass = "active";
console.log(network.name);
};
var clearSelectedNetwork = function() {
$.each($scope.networks, function(index, value) {
value.activeClass = "";
});
};
}
);
networkController.js
'use strict';
habeoApp.controller('networkController', ['$scope', '$routeParams'],
function networkController($scope, $routeParams) {
var par = $routeParams;
$scope.network = {
availableIps: 200,
assignedIps: 55,
totalIps: 255,
ips: [
{ ipAddress: "10.39.2.7", dns: "sw-lnp-vhdev", requested: "2013/12/04", Owner: "Lukasz Maslanka" },
{ ipAddress: "10.39.3.17", dns: "sw-lnp-vh7", requested: "2013/12/02", Owner: "Tom Bedard" },
{ ipAddress: "10.39.3.19", dns: "sw-lnp-vh10", requested: "2013/12/01", Owner: "Blake Kennedy" },
{ ipAddress: "10.39.4.114", dns: "sw-lnp-vh12", requested: "2013/11/27", Owner: "Terry McKerral" },
{ ipAddress: "10.39.4.171", dns: "sw-lnp-vh21", requested: "2013/11/14", Owner: "Andrew Henry" }
]
};
}
);
networkDetails.html
<div class="row">
<div class="col-md-4 info-box-blue">
<h5 class="">Available IP's</h5>
</div>
<div class="col-md-4 info-box-lightblue">
<h5 class="">Assigned IP's</h5>
</div>
<div class="col-md-4 info-box-green">
<h5 class="">Total IP's</h5>
</div>
</div>
<div class="row">
<div class="col-md-4 info-box-blue info-box-footer-padding">
<h1 class="text-center info-box">{{network.availableIps}}</h1>
</div>
<div class="col-md-4 info-box-lightblue info-box-footer-padding">
<h1 class="text-center info-box">{{network.assignedIps}}</h1>
</div>
<div class="col-md-4 info-box-green info-box-footer-padding">
<h1 class="text-center info-box">{{network.totalIps}}</h1>
</div>
</div>
<div class="row">
<button type="button" class="btn btn-primary wide">Request IP</button>
</div>
<div class="row">
<input type="text" class="form-control wide" placeholder="Search...">
</div>
<div class="row top-margin">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>IP Address</th>
<th>DNS</th>
<th>Requested</th>
<th>Owner</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="ip in network.ips">
<td>{{ip.ipAddress}}</td>
<td>{{ip.dns}}</td>
<td>{{ip.requested}}</td>
<td>{{ip.owner}}</td>
</tr>
</tbody>
</table>
</div>
index.cshtml
<div class="row" data-ng-controller="networkListController">
<div class="col-md-3">
<div class="add-vlan-button-container">
<button type="button" class="btn btn-default add-vlan-button" data-toggle="modal" data-target="#add-new-network-form">Add Network</button>
</div>
<div class="">
<ul class="nav nav-pills nav-stacked">
<li data-ng-class="network.activeClass" data-ng-repeat="network in networks" data-ng-click="selectNetwork(network)"><a href="{{network.url}}">{{network.name}}</a></li>
</ul>
</div>
</div>
<div class="col-md-9" data-ng-view>
</div>
</div>
networkController
定义中存在错误:数组应包含函数(即控制器)作为最后一个参数,而不是单独的第三个参数。
habeoApp.controller('networkController', ['$scope', '$routeParams',
function networkController($scope, $routeParams) {
var par = $routeParams;
$scope.network = {
availableIps: 200,
assignedIps: 55,
totalIps: 255,
ips: [
{ ipAddress: "10.39.2.7", dns: "sw-lnp-vhdev", requested: "2013/12/04", Owner: "Lukasz Maslanka" },
{ ipAddress: "10.39.3.17", dns: "sw-lnp-vh7", requested: "2013/12/02", Owner: "Tom Bedard" },
{ ipAddress: "10.39.3.19", dns: "sw-lnp-vh10", requested: "2013/12/01", Owner: "Blake Kennedy" },
{ ipAddress: "10.39.4.114", dns: "sw-lnp-vh12", requested: "2013/11/27", Owner: "Terry McKerral" },
{ ipAddress: "10.39.4.171", dns: "sw-lnp-vh21", requested: "2013/11/14", Owner: "Andrew Henry" }
]
};
}]
);
我假设您想使用networkController
作为networkDetail.html
的控制器,而NetworkCntl
只是您在调试过程中引入的一个伪控制器。
工作演示:http://plnkr.co/edit/uA59OUGZr1FiiNy5tnTT?p=preview
相关文章:
- ng绑定和ng href问题.ng href未从控制器加载数据
- 将指令绑定到控制器属性
- 当显式定义控制器参数时,默认模型绑定器会发生异常
- AngularJS 1.5.x服务未正确绑定,并且未在控制器中更新
- 将角度材质设计复选框绑定到控制器中的数组
- 在将绑定应用于控制器之后,是否会发出Angular$scope事件
- Ember.js:将Em.$.getJSON转换为promise并将响应绑定到控制器上下文的正确方法
- 同一页面上两个不同控制器的Angularjs双向绑定字段
- 角度控制器不绑定服务对象属性 ng-repeat
- 在 AngularJS 中将数据从视图绑定到控制器
- 工厂和控制器之间的“绑定”
- 无法绑定到没有指令 + angularjs 标识符的控制器
- AngularJS路由未绑定控制器
- AngularJS隔离的作用域和控制器绑定
- 角度 JS - 数据未从控制器绑定到视图
- 我想要从控制器绑定iframe的src
- Ember.js视图值到控制器绑定
- Ember.js中使用{{render}} helper的嵌套控制器绑定
- 通过指令将元素添加到 DOM 并从控制器绑定范围监视(角度.js)
- 无法将更新的控制器绑定为变量以在 AngularJS 中查看