Angularjs不绑定数据和html不打印范围变量答案

【问题标题】：Angularjs not binding data and html not printing scope variablesAngularjs不绑定数据和html不打印范围变量
【发布时间】：2017-07-09 14:26:20
【问题描述】：

那是我的完整代码 angular 没有在 html pice 的 body 标记中打印变量，console.log() 到处都在工作。 ng-click at submit 按钮也可以正常工作。

<html ng-app="fb">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap      /3.3.7/css/bootstrap.min.css"
 integrity="sha384-   BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 
crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5  /angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-cookie/4.1.0/angular-cookie.js"></script>

<script>
var app=angular.module('fb', []);

app.controller('home',function($scope){
    var hi;
    $scope.hi=5;
    //$rootScope.hola=9;
    console.log($scope.hi);
    //console.log($rootScope.hola);

    $scope.submitSignup=function()
    {
    var hi;
    $scope.hi=5;
    //$rootScope.hola=9;
    console.log($scope.hi);
    //console.log($rootScope.hola);
    console.log($scope.username);
        alert('button pressed');
    };
});

</script>
<head>
<title>Index</title
</head>

<body>
<div ng-controller='home'>
<input type="text" placeholder="Username" ng-model="username">
<br>
<input type="password" placeholder="Password" ng-model="password">
<br>

<button type="button" ng-click="submitSignup()">SignUp</button>

<br>

<p> {{username}} </p>


<p> {{hi}} </p>


{{hola}}


</div>

<p> index </p>
</body>
</html>

为此绞尽脑汁，不胜感激。

【问题讨论】：

标签： html angularjs

【解决方案1】：

使用 ng-app="fb"

在您的模板中添加 ng-app

演示

<html ng-app="fb">
<head>
<title>Index</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<script>
var app=angular.module('fb', []);
app.controller('home',function($scope){
    var hi;
    $scope.hi=5;
    //$rootScope.hola=9;
    console.log($scope.hi);
    //console.log($rootScope.hola);

    $scope.submitSignup=function()
    {
    var hi;
    $scope.hi=5;
    //$rootScope.hola=9;
    console.log($scope.hi);
    //console.log($rootScope.hola);
    console.log($scope.username);
        alert('button pressed');
    };
});
</script>
<body>
<div ng-controller='home'>
<input type="text" placeholder="Username" ng-model="username">
<br>
<input type="password" placeholder="Password" ng-model="password">
<br>
<button type="button" ng-click="submitSignup()">SignUp</button>
<br>
<p> {{username}} </p>
<p> {{hi}} </p>
{{hola}}
</div>
<p> index </p>
</body>
</html>

【讨论】：

ng-app="fb" 添加在标记中的所有源之上。
您查看了演示吗？在您的 html 中没有角度和脚本的参考
这些是我添加的链接，ng-click 有效，所以 Angular 也有效。 maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
控制器和模块脚本的参考在哪里
它们在同一个文件中，所以可能不需要参考？

【解决方案2】：

您忘记使用ng-app="fb" 启动您的应用

 <body ng-app="fb">
    <div ng-controller="home">
        <input type="text" placeholder="Username" ng-model="username">
        <br>
        <input type="password" placeholder="Password" ng-model="password">
        <br>
        <button type="button" ng-click="submitSignup()">SignUp</button>

        <p> {{username}} </p>

        <p> {{hi}} </p>

        {{hola}}

    </div>
    <p> index </p>
</body>

</html>

【讨论】：

ng-app="fb" 添加在标记中的所有源之上。
显示您在 html 上方加载的文件
这些是我从 Angular 文档中获得的链接。 Angular 工作正常，但数据也未显示 ng-click 调用我的函数并生成警报。
尝试将你的 Angular 代码抽象成一个 js，并在你上面的 html 中给出对那个 js 文件的引用
该空间可能是在发布时添加的，它不在我的源代码中。好的，将其放入 js 文件中。但它应该以这种方式工作。