Question

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

Answer 1

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

AngularJS Routing不绑定控制器

1 个答案: