AngularJS没有发生绑定答案

【问题标题】：Binding not happening with AngularJSAngularJS没有发生绑定
【发布时间】：2014-09-26 12:41:39
【问题描述】：

我刚刚下载了 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}}

下面是我的控制器类：

'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;
    });
}]);

我的解决方案结构如下图：

【问题讨论】：

如果你为此创建了一个 plunker/jsfiddle 等会很有帮助
对此我不确定！！！我只是在创建我的第一个应用程序。我通读了帖子，并为此模板提出了建议。所以继续这样做
抱歉忽略那条评论，我虽然是纯 js 和 html :)
@adityaswam89 我建议您从纯 html 和 javascript 方式查看 Angular，而不是涉及 ASP.NET MVC，这不是必需的。这是一个用于许多框架的标准示例todomvc.com/architecture-examples/angularjs/#

标签： javascript asp.net angularjs

【解决方案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 的完整代码，我认为它不是必需的。

【讨论】：

@adityaswami89 为什么在 personView 上有 4 次 PersonCtrl？应该只有一个。

【解决方案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-controller。

是否有指向多个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}}

【讨论】：