Question

我刚刚下载了Visual Studio的AngularJS SPA模板，并从我的第一个应用程序开始。我已经面临很多问题!!!

以下是我的PersonView：

<!DOCTYPE html>

<html ng-app="app">
<head>
<meta name="viewport" content="width=device-width" />
<title>Add Person</title>
<script src="~/Scripts/vendor/angular.js"></script>
<script src="~/Scripts/app.js" type="text/javascript"></script>
<script src="~/Scripts/controllers.js"></script>

</head>
<body ng-controller="PersonCtrl">
<form name="A" ng-controller="PersonCtrl">
    <div class="row" >
        <div class="col-md-2">
            First Name:
        </div>
        <div>
            <input type="text" name="input" ng-model="$firstName"
                   ng-pattern="word" ng-required="true" />

        </div>
    </div>
</form>
<form name="B" ng-controller="PersonCtrl">
    <div class="row" >
        <div class="col-md-2">
            Middle Name:
        </div>
        <div>
            <input type="text" name="middleName" ng-model="$middleName"
                   ng-pattern="word" ng-required="true" />

        </div>
    </div>

</form>
<form name="C" ng-controller="PersonCtrl">
    <div class="row" >
        <div class="col-md-2">
            Last Name:
        </div>
        <div>
            <input type="text" name="lastName" ng-model="$lastName"
                   ng-pattern="word" ng-required="true" />

        </div>
    </div>
</form>



<br />

Name :  {{firstName + middleName + lastName}}

以下是我的Controller类：

'use strict';

// Google Analytics Collection APIs Reference:
// https://developers.google.com/analytics/devguides/collection/analyticsjs/

angular.module('app.controllers', [])

// Path: /
.controller('HomeCtrl', ['$scope', '$location', '$window', function ($scope, $location, $window)
{
    $scope.$root.title = 'AngularJS SPA Template for Visual Studio';
    $scope.$on('$viewContentLoaded', function () {
        $window.ga('send', 'pageview', { 'page': $location.path(), 'title': $scope.$root.title
 });
    });
}])

// Path: /about
.controller('AboutCtrl', ['$scope', '$location', '$window', function ($scope, $location, $window) {
    $scope.$root.title = 'AngularJS SPA | About';
    $scope.$on('$viewContentLoaded', function () {
        $window.ga('send', 'pageview', { 'page': $location.path(), 'title': $scope.$root.title });
    });
}])

// Path: /login
.controller('LoginCtrl', ['$scope', '$location', '$window', function ($scope, $location, $window) {
    $scope.$root.title = 'AngularJS SPA | Sign In';
    // TODO: Authorize a user
    $scope.login = function () {
        $location.path('/');
        return false;
    };
    $scope.$on('$viewContentLoaded', function () {
        $window.ga('send', 'pageview', { 'page': $location.path(), 'title': $scope.$root.title });
    });
}])

.controller('PersonCtrl', ['$scope', function($scope) {
    //$scope.$root.title = 'Create Person';
    $scope.firstName = 'Aditya';
    $scope.lastName = 'Swami';
    $scope.middleName = ' ';

}])

// Path: /error/404
.controller('Error404Ctrl', ['$scope', '$location', '$window', function ($scope, $location,      $window) {
    $scope.$root.title = 'Error 404: Page Not Found';
    $scope.$on('$viewContentLoaded', function () {
        $window.ga('send', 'pageview', { 'page': $location.path(), 'title': $scope.$root.title });
    });
}]);

和我的App.js

'use strict';


 angular.module('app', ['ui.router', 'app.filters', 'app.services', 'app.directives',  'app.controllers'])

// Gets executed during the provider registrations and configuration phase. Only providers and constants can be
// injected here. This is to prevent accidental instantiation of services before they have been fully configured.
.config(['$stateProvider', '$locationProvider', function ($stateProvider, $locationProvider) {

    // UI States, URL Routing & Mapping. For more info see: https://github.com/angular-ui/ui-router
    // ------------------------------------------------------------------------------------------------------------

    $stateProvider
        .state('home', {
            url: '/',
            templateUrl: '/views/index',
            controller: 'HomeCtrl'

        })
        .state('about', {
            url: '/about',
            templateUrl: '/views/about',
            controller: 'AboutCtrl'
        })
        .state('login', {
            url: '/login',
            layout: 'basic',
            templateUrl: '/views/login',
            controller: 'LoginCtrl'
        })
        .state('person', {
            url: '/PersonView',
            layout: 'basic',
            templateUrl: '/views/PersonView',
            controller: 'PersonCtrl'
        })
        //.state('otherwise', {
        //    url: '*path',
        //    templateUrl: '/views/404',
        //    controller: 'Error404Ctrl'
        //});

    $locationProvider.html5Mode(true);

}])


.run(['$templateCache', '$rootScope', '$state', '$stateParams', function                                                                       ($templateCache,$rootScope, $state, $stateParams) {

    // <ui-view> contains a pre-rendered template for the current view
    // caching it will prevent a round-trip to a server at the first page load
    var view = angular.element('#ui-view');
    $templateCache.put(view.data('tmpl-url'), view.html());

    // Allows to retrieve UI Router state information from inside templates
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams;

    $rootScope.$on('$stateChangeSuccess', function (event, toState) {


        // based on which page the user is located
        $rootScope.layout = toState.layout;
    });
}]);

我的解决方案结构如下所示：

enter image description here

Answer 1

尝试使用firstName而不是$ firstName：

 <input type="text" name="input" ng-model="firstName" ng-pattern="word" ng-required="true" />

将您的视图重写为（没有多个表单和控制器）：

<body ng-controller="PersonCtrl">

    <div class="row" >
        <div class="col-md-2">
            First Name:
        </div>
        <div>
            <input type="text" name="input" ng-model="firstName"
                   ng-required="true" />

        </div>
    </div>

    <div class="row" >
        <div class="col-md-2">
            Middle Name:
        </div>
        <div>
            <input type="text" name="middleName" ng-model="middleName"
                    ng-required="true" />

        </div>
    </div>


    <div class="row" >
        <div class="col-md-2">
            Last Name:
        </div>
        <div>
            <input type="text" name="lastName" ng-model="lastName"
                    ng-required="true" />

        </div>
    </div>

还删除了$ templateCache的完整代码，我认为不需要。

Answer 2

您的文件包含已存在于父文件中的内容。

应该删除所有这些内容（如果您没有发布所有文件，请从文件末尾删除</body>和</html>标记）

<!DOCTYPE html>

<html ng-app="app">
<head>
<meta name="viewport" content="width=device-width" />
<title>Add Person</title>
<script src="~/Scripts/vendor/angular.js"></script>
<script src="~/Scripts/app.js" type="text/javascript"></script>
<script src="~/Scripts/controllers.js"></script>

</head>
<body ng-controller="PersonCtrl">

另请注意，在文件中嵌套了实际上已在路径上定义的控制器，因此根本不需要任何ng控制器。

是否有多个form标签？您可能有一个特定的要求，否则我会用一个表单包装所有页面。

修改

此外，您应该在绑定的控制器字段前加$

以下是关于完整文件应如何显示的建议。

<form name="MyForm" novalidate> <div class="row" > <div class="col-md-2"> First Name: </div> <div> <input type="text" name="input" ng-model="firstName" ng-pattern="word" ng-required="true" /> </div> </div> <div class="row" > <div class="col-md-2"> Middle Name: </div> <div> <input type="text" name="middleName" ng-model="middleName" ng-pattern="word" ng-required="true" /> </div> </div> <div class="row" > <div class="col-md-2"> Last Name: </div> <div> <input type="text" name="lastName" ng-model="lastName" ng-pattern="word" ng-required="true" /> </div> </div> </form> <br /> Name : {{firstName + middleName + lastName}}

绑定不会发生在AngularJS上

2 个答案: