从 AngularJS 将文本插入 HTML

Inserting text into HTML from AngularJS

本文关键字：插入 HTML 文本 AngularJS      更新时间：2023-09-26

在我的index.html文件中，我创建了一个非常简单的表单。我已经将大部分细节分成app.js这样，如果有人想让他们的表单版本看起来不同，他们只需要插入一个修改后的app.js副本（尝试在这里实现可移植性）。

但是，我对AngularJS很陌生，这是很多app.js正在使用的。我可以使用一些帮助！

这是我遇到一些麻烦的代码片段：

<body ng-controller="controller">
<div class="page">
  <section class="signin">
  <form name="form" novalidate>
    <div class="intro">
      <label ng-model="service-desk-name"></label>
      <span ng-bind="service-desk-name"></span>
      <label ng-model="welcome"></label>
      <span ng-bind="welcome"></span>
    </div>

结合：

var app = angular.module('app',[]);
app.controller('controller', ['$scope', function($scope) {
    $scope.service-desk-name = 'Arbitrary Service Desk Name';
    $scope.welcome = 
        'Please sign in and a consultant will be with you shortly.';
}]);

因为我可能正在做一些可怕的错误，我会解释我想做什么。intro部分显示在实际表单上方，分别显示服务台名称以及通过ng-model="service-desk-name"和ng-model="welcome"的某种自定义欢迎或信息消息。我希望我能让HTML获取我在app.js中定义的这两个模型的值。这样，HTML 就不控制显示的内容，它只是抓取定义的内容并显示它。

目前，这些字段根本没有显示在网页上，表明只是存在某种语法错误。我对 Angular 很陌生，所以我真的不知道从这里尝试修复它。

替换

<label ng-model="service-desk-name"></label>

跟 

<label>{{service-desk-name}}</label>

ng-model 表示您想要双向绑定，例如与 input s 一起使用，以便当您开始在 input 中键入时，该值存储在您通过 ng-model 引用的任何内容中，即

<input type="text" ng-model="inputValue" />

将输入保存到$scope.inputValue

{{}}表示您希望从视图中的控制器输出某些内容。

当你直接在.（点）之后定义时，变量名不能有最特殊的字符（_、$除外）。这就是控制器代码引发错误的原因，因为页面上没有呈现任何内容。

您可以通过在对象上指定键来定义该属性$scope例如 

$scope['service-desk-name'] = 'Arbitrary Service Desk Name';

此外，ng-model仅适用于input元素，但您正在使用超过 label .在下面也更改为welcome。

<input ng-model="service-desk-name"/>

但理想情况下，您不应该以这种格式定义范围变量。 首选方法是在定义变量时使用camelCase。

同意 Pankaj Parkar 的观点

在这种情况下，您

也无法获得值，因为您没有设置"ng-app"

PLNKR链接

var app = angular.module('app', []);
app.controller('myController', function ($scope) {
    $scope.serviceDeskName = 'Arbitrary Service Desk Name';
    $scope.welcome = 'Please sign in and a consultant will be with you shortly.';
});
<!DOCTYPE html>
<html ng-app="app"> <!-- For example define your app module name here -->
<head>
  <link rel="stylesheet" href="style.css">
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
  <script src="script.js"></script>
</head>
<body ng-controller="myController">
  <div class="page">
    <section class="signin">
      <form name="form" novalidate>
        <div class="intro">
          <label ng-model="serviceDeskName"></label>
          <span ng-bind="serviceDeskName"></span>
          <hr>
          <label ng-model="welcome"></label>
          <span ng-bind="welcome"></span>
        </div>
      </form>
    </section>
  </div>
</body>
</html>

相关文章：