Javascript AngularJS不发生绑定_Javascript_Asp.net_Angularjs

Javascript AngularJS不发生绑定

javascript asp.net angularjs

Javascript AngularJS不发生绑定,javascript,asp.net,angularjs,Javascript,Asp.net,Angularjs,我刚刚下载了Visual studio的AngularJS SPA模板，并开始使用我的第一个应用程序。我已经面临很多问题了以下是我的个人观点： <!DOCTYPE html> <html ng-app="app"> <head> <meta name="viewport" content="width=device-width" /> <title>Add Person</title> <script src="~

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

以下是我的个人观点：

<!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}}

还有我的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;
    });
}]);

“严格使用”；
angular.module（'应用'，['用户界面路由器'，'应用过滤器'，'应用服务'，'应用指令'，'应用控制器']））
//在提供程序注册和配置阶段执行。只能选择提供程序和常量
//在这里注射。这是为了防止在完全配置服务之前意外实例化服务。
.config（['$stateProvider'，'$locationProvider'，函数（$stateProvider，$locationProvider）{
//用户界面状态、URL路由和映射。有关更多信息，请参阅：https://github.com/angular-ui/ui-router
// ------------------------------------------------------------------------------------------------------------
$stateProvider
.州（“家”{
url:“/”，
templateUrl:“/views/index”，
控制器：“HomeCtrl”
})
.state（'about'{
url:“/关于”，
templateUrl:“/views/about”，
控制器：“AboutCtrl”
})
.state（'登录'{
url:“/login”，
布局：“基本”，
templateUrl:“/views/login”，
控制器：“LoginCtrl”
})
.州（“人”{
url:“/PersonView”，
布局：“基本”，
templateUrl:“/views/PersonView”，
控制器：“PersonCtrl”
})
//.state（'否则'{
//url:“*路径”，
//templateUrl:“/views/404”，
//控制器：“Error404Ctrl”
//});
$locationProvider.html5Mode（true）；
}])
.run（['$templateCache'、$rootScope'、$state'、$stateParams'，函数（$templateCache、$rootScope、$state、$stateParams）{
//包含当前视图的预渲染模板
//缓存它将防止在加载第一页时往返到服务器
var view=angular.element（“#ui视图”）；
$templateCache.put（view.data（'tmpl-url'）、view.html（））；
//允许从模板内部检索UI路由器状态信息
$rootScope.$state=$state；
$rootScope.$stateParams=$stateParams；
$rootScope.$on（“$stateChangeSuccess”，函数（事件，toState）{
//基于用户所在的页面
$rootScope.layout=toState.layout；
});
}]);

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

尝试使用firstName而不是$firstName:

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

将视图重写为（不带多个窗体和控制器）：


名字：
中名：
姓氏：

同时删除$templateCache的完整代码，我认为这不是必需的。

您的文件包含了父文件中已经包含的内容

所有这些都应该删除（是您没有发布所有文件，请从文件末尾删除

和

标记）

如果您为此创建了一个plunker/JSFIDLE等，这将非常有用。我对此不确定！！！我正在创建我的第一个应用程序。我通读了一些帖子，建议使用这个模板。因此，很抱歉，请忽略我认为是纯js和html的评论：）@adityaswam89我建议您从纯html和javascript的角度来看待angular，而不是涉及ASP.NET MVC，这是不需要的。这里有一个用于许多框架@adityaswami89的标准示例，为什么personView上有4次PersonCtrl？应该只有一个。

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

<!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="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}}