Question

我有以下html：

<!DOCTYPE HTML>
<html>
    <head>
        <title>Basic</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js type="text/javascript">
        </script>
    </head>
    <body>
        <div ng-app="myApp">
            <input ng-model="to" type="email"
                placeholder="Recipient here.."/>
            <textarea ng-model="emailBody"
                placeholder="Email body here..">
            </textarea>
            <h2> {{ emailBody }} </h2>
        </div>
    </body>
</html>

我正在引用textArea中的emailBody数据，但它不会绑定相关的数据。它只是字面上输入{{emailBody}}。

我做错了什么？

Answer 1

假设您是第一次玩Angular，您可能想要使用＆＃34; ng-app＆＃34;没有值的参数，它将设置注入上下文而不将其映射到命名的应用程序控制器（在您的示例中缺少）。另请注意，您缺少脚本标记的src参数的结束引号。

以下是您的示例，这两个修复程序正常运行。

<!DOCTYPE HTML>
<html ng-app>
    <head>
        <title>Basic</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js" type="text/javascript"></script>
    </head>
    <body>
        <div>
            <input ng-model="to" type="email" placeholder="Recipient here.."/>
            <textarea ng-model="emailBody" placeholder="Email body here..">
            </textarea>
            <h2> {{emailBody}} </h2>
        </div>
    </body>
</html>

Answer 2

尝试将以下内容添加到java脚本文件中。

angular.module('myApp',[]).controller('myController',['$scope',function($scope){
  $scope.emailBody = 'test';
}]);

它定义了您要绑定的应用程序/模块和emailBody字段。

然后，您可以添加对脚本的引用，并添加ng-contoller以引用控制器。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Basic</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js" type="text/javascript">
        </script>
        <script src='someUrlToYour JavaScript file'></script>
    </head>
    <body>
        <div ng-app="myApp" ng-controller='myController'>
            <input ng-model="to" type="email"
                placeholder="Recipient here.."/>
            <textarea ng-model="emailBody"
                placeholder="Email body here..">
            </textarea>
            <h2> {{ emailBody }} </h2>
        </div>
    </body>
</html>

数据绑定在我的AngularJS应用程序中无效

2 个答案: