javascript 角度控制器不工作

Angular controller not working

提问by pnv

I'm newbie to angular My angular controller is:

我是角度的新手我的角度控制器是：

var chatApp = angular.module('chatApp.controllers', []);

chatApp.controller('loginController', ['$scope', function($scope) {
$scope.user_name="name";
$scope.user_password="name";
}]);

the app.js is:

app.js 是：

'use strict';
angular.module('chatApp', [
'ui.router',
'chatApp.filters',
'chatApp.services',
'chatApp.directives',
'chatApp.controllers'
]).config(function($stateProvider, $urlRouterProvider) {
$stateProvider
    .state('login', {
        url: "/login",
        templateUrl: "partials/login.html",
        controller : "loginController"
    })
});

login.html is:

login.html 是：

<div>
<div id="wrapper">
    <form name="login-form" class="login-form" action="" method="post">
        <div class="header">
            <h1>Login Form</h1>
        </div>
        <div class="content">
            <input name="username" type="text" class="input username" placeholder="{{user_name}}" />
            <div class="user-icon"></div>
            <input name="password" type="password" class="input password" placeholder="{{user_password}}" />
            <div class="pass-icon"></div>
        </div>
    </form>
</div>

I've used stateprovider for routing. But, it's not showing anything in placeholder. What is the reason?

我使用 stateprovider 进行路由。但是，它没有在占位符中显示任何内容。是什么原因？

回答by pnv

Solved the problem using ng-model instead of {{}}.

使用 ng-model 而不是 {{}} 解决了问题。

<div class="content">
            <input name="username" type="text" class="input username" placeholder="username" ng-model="user_name" />
            <div class="user-icon"></div>
            <input name="password" type="password" class="input password" placeholder="password" ng-model="user_password"/>
            <div class="pass-icon"></div>
        </div>

回答by bookthief

This works for me if I say ng-controller = "loginController" in the html-

如果我在 html- 中说 ng-controller = "loginController"，这对我有用

<div ng-controller = 'loginController'>
<div id="wrapper">
    <form name="login-form" class="login-form" action="" method="post">
        <div class="header">
            <h1>Login Form</h1>
        </div>
        <div class="content">
            <input name="username" type="text" class="input username" placeholder="{{user_name}}" />
            <div class="user-icon"></div>
            <input name="password" type="password" class="input password" placeholder="{{user_password}}" />
            <div class="pass-icon"></div>
        </div>
</div>

Here's a JSBin with it working: http://jsbin.com/aDuJIku/265/edit?html,js,output

这是一个可以工作的 JSBin：http://jsbin.com/aDuJIku/265/edit?html,js, output

This solution doesn't include ui-router, but it should work with it.

此解决方案不包含 ui-router，但应该可以使用它。

回答by Subash Selvaraj

Try this:

试试这个：

 var chatApp = angular.module('chatApp.controllers', []);

    chatApp.controller('loginController', ['$scope','$timeout', function($scope,$timeout) {

        $timeout(function(){
            $scope.user_name="name";
            $scope.user_password="name";
        },100);

    }]);

回答by Tiago Moutinho

you just have to change to RouteProvider, In your case you just do:

您只需要更改为RouteProvider，在您的情况下，您只需：

angular.module('chatApp', [ 'ngRoute' 'ui.router','chatApp.filters','chatApp.services', 'chatApp.directives', 'chatApp.controllers'])
.config(function($routeProvider) {
    $routeProvider.when('/login', { templateUrl: "partials/login.html", controller: "loginController" })
});

please make sure that you have angular-route js included.

请确保您包含 angular-route js。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular-route.js"></script>

Hope this help you! ;)

希望这对你有帮助！;)

Here's some examples for you this

下面是一些例子这

回答by Dilip Nannaware

Below mentioned code works.

下面提到的代码有效。

Note: If somebody tries to run this code in preview its not going to work. JS and HTML code needs to be copied in separate file and use the names mentioned.

注意：如果有人试图在预览中运行此代码，它将无法正常工作。JS 和 HTML 代码需要复制到单独的文件中并使用提到的名称。

var myContrlApp = angular.module('ContrlApp', []);
myContrlApp.controller('MainController', function ($scope) {
    var person = {
        firstName: "Keith",
        lastName: "Hymanson",
    };
    $scope.message = "Welcome, Angular !";
    $scope.person = person;
});

<html ng-app="ContrlApp">
<head>
    <script type="text/javascript" src="Scripts/angular.js"></script>
    <script type="text/javascript" src="Scripts/angular-route.js"></script>
    <script type="text/javascript" src="Scripts/script.js"></script>
    <!--<link rel="stylesheet" href="style.css" />-->
    <title>Angular JS Tryout</title>
</head>
<body ng-controller="MainController">
    <div>
        <h1>{{message}}</h1>
        <div>
            <div>First name: {{person.firstName}}</div>
            <div>Last name: {{person.lastName}}</div>

        </div>
    </div>
</body>
</html>