ng-view表达式是;不工作

时间:2015-08-11 10:33:31

标签: asp.net angularjs

index.cshtml

<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>

    <script src="~/Scripts/angular.min.js"></script>

    <script src="~/Scripts/angular-route.min.js"></script>

    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <script src="~/App/App.js"></script>

    <script src="~/App/Controllers/FlightCtrl.js"></script>

</head>
<body>
    <div id="wrapper">
        <a href="#/Admin" class="navbar-brand">Hi</a>
        @*<resolve-loader></resolve-loader>*@
        <div class="nav navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav" >
                        <li>@Html.ActionLink("Home", "Index", "Home")</li>
                        <li class="dropdown">
                            <a>Add Flight</a>


                        </li>
                    </ul>


                </div>

        </div>


    </div>
        <div ng-view> </div>
</body>
</html>

App.js

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


AirReservationApp.config(['$routeProvider',
    function ($routeProvider)
    {
        $routeProvider.
            when('/Admin', { templateUrl: 'App/Views/Flights/AddFlight.htm', controller: 'FlightCtrl' }).
        otherwise({
            redirectTo: '/Admin'
        });

    }
]);

AddFlight.html

<div ng-controller="FlightCtrl">
    <ng-form name="formFlight">
        <div>



                  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <label class="col-xs-12 col-sm-12 col-md-12 col-lg-12" for="question">Question <span class="mandatory">*</span> </label>
                <div class="form-group col-xs-9 col-sm-9  col-md-8 col-lg-8"

                    <input type="text" name="FlightCode"
                           ng-required="=true" existnamevalidate valid="YN"
                           placeholder="Enter Flight Code"
                           ng-model="CreateFlight.Flight.FlightCode">

                    <span class="help-block"

                        Flight code is required.>
                    </span>
                    <span class="help-block"

                        This Flight Code already exists.>
                    </span>


                </div>
            </div>


            <!--ng-show="isTextType"-->

            <div class="row btn-pos-change">
                <div class="col-md-12 padding-top-12 btn-blocks">
                    <div class="form-group">

                        <button type="button" class="btn btn-success pull-right"

                                >
                          {{saveBtnText}}
                        </button>
                    </div>
                </div>
            </div>

        </div>
    </ng-form>
</div>

FlightCtrl.js

  var FlightCtrl = angular.module("FlightCtrlModule", []);
  FlightCtrl.controller("FlightCtrl",  ["$scope", "$rootScope", "$timeout", "$window", "$route",
    function ($scope, $rootScope, $timeout, $window, $route)
    {
        alert('Hello');
        $scope.saveBtnText = "Create";
    }]);

表达式{{saveBtnText}}未显示“创建”。任何人都可以帮助我。

1 个答案:

答案 0 :(得分:0)

试试这个。

首先在 App.js 中的 AirReservationApp 模块顶部创建 FlightCtrlModule 模块,并将其注入 AirReservationApp 模块。

<强> App.js

angular.module("FlightCtrlModule", []);

var AirReservationApp = angular.module("AirReservationApp", ['ngRoute',    'FlightCtrlModule']);

AirReservationApp.config(['$routeProvider',
    function ($routeProvider) {
        $routeProvider.
            when('/Admin', { templateUrl: '/home.html', controller:   'FlightCtrl'    }).
            otherwise({
                redirectTo: '/Admin'
            });

    }
]);

现在将 FlightCtrl 控制器附加到 AirReservationApp 模块,即可访问 FlightCtrlModule 模块。

<强> FlightCtrl

//var FlightCtrl = angular.module("FlightCtrlModule", []);

AirReservationApp.controller("FlightCtrl", ["$scope",  "$rootScope", "$timeout", "$window", "$route",
    function ($scope, $rootScope, $timeout, $window, $route) {
        alert('Hello');
        $scope.saveBtnText = "Create";
    }]);

<强>更新

如果你想保持你的方法,你可以做的是,将飞行控制器移到app.js之上,如下所示:

    <script src="~/App/Controllers/FlightCtrl.js"></script>
    <script src="~/App/App.js"></script>

然后将模块 FlightCtrlModule 注入 AirReservationApp 模块,如下所示:

var AirReservationApp = angular.module("AirReservationApp", ['ngRoute',    'FlightCtrlModule']);

两种方式都有相同的结果。

Example Project - Dropbox