AngularJS路由未绑定控制器

AngularJS Routing is not Binding the Controller

本文关键字:控制器 绑定 路由 AngularJS      更新时间:2023-09-26

我正试图在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