简体   繁体   English

AngularJS数据绑定没有发生

[英]AngularJS Data Binding is not happening

I am just playing around with AngularJS and I wrote a small piece of code which I have shared here . 我正在玩AngularJS,我写了一小段代码,我在这里分享。 But for some reason, the binding of data doesnt happen. 但由于某种原因,数据的绑定不会发生。 Here is the HTML and JS code for those who do not want to go to the plucker site. 以下是那些不想访问plucker网站的人的HTML和JS代码。

first.html first.html

<!doctype html>
<html ng-app="firstApp">
<head>
    <title>First Angular JS</title>
    <script src="/lib/angular.min.js"></script>
    <script src="/js/first.js"></script>
</head>
<body>
    <div ng-controller="FirstController">
        <span>Name:</span>
        <input type="text" ng-model="first">    
        <input type="text" ng-model="last">
        <button ng-click='updateMessage()'>Message</button>
        <hr>{{heading + message}}
    </div>

</body>
</html>

first.js first.js

var firstApp = angular.module('firstApp',[]);
firstApp.controller = ('FirstController',function($scope)
{
  $scope.first = "Some";
  $scope.last = "one";
  $scope.heading = "Message: ";
  $scope.updateMessage = function()
    {
      $scope.message = 'Hello' + $scope.first + ' ' + $scope.last + '!';
    };
  });

In the HTML, I am using express to redirect calls to its appropriate places 在HTML中,我使用express将调用重定向到适当的位置

node_server.js node_server.js

var express = require('express');
var app = express();
app.use('/', express.static('./static')).
    use('/images',express.static('./images')).
    use('/lib',express.static('./lib/angular-1.2.22'));
app.listen(8080);

The output is showing {{message + heading}}. 输出显示{{message + heading}}。 Does anyone have any ideas why this wouldnt work? 有没有人有任何想法为什么这不起作用?

The issue is in the way you're declaring your controller. 问题在于您声明控制器的方式。

You have: 你有:

firstApp.controller = ('FirstController',function($scope) ...

It should be: 它应该是:

firstApp.controller('FirstController', function($scope) ...

Try this: 尝试这个:

firstApp.controller('FirstController', ['$scope', function($scope) { ... firstApp.controller('FirstController',['$ scope',函数($ scope){...

Doc's for controller in Angular Angular控制器的Doc's

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM