从 AngularJS 将文本插入 HTML答案

【问题标题】：Inserting text into HTML from AngularJS从 AngularJS 将文本插入 HTML
【发布时间】：2016-04-27 17:28:04
【问题描述】：

在我的index.html 文件中，我创建了一个非常简单的表单。我已将大部分细节分离到 app.js 中，因此如果有人想让他们的表单版本看起来不同，他们只需插入 app.js 的修改副本（尝试在此处进行移植）。

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

这是我遇到问题的代码 sn-p：

<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 很陌生，所以我真的不知道从这里尝试解决什么问题。

【问题讨论】：

标签： javascript html angularjs angularjs-controller angularjs-ng-model

【解决方案1】：

替换

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

与

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

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

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

将输入保存到$scope.inputValue

{{}} 表示你想从视图中的控制器输出一些东西。

【讨论】：

现在您已经为我澄清了这种差异，这很有意义。那行得通！我只需将service-desk-name 变量更改为servicedeskkiosk 即可修复语法错误。
是的，没注意到！

【解决方案2】：

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

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

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

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

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

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

【讨论】：

【解决方案3】：

同意Pankaj Parkar

在这种情况下你也无法获得价值，因为你没有设置“ng-app”

plnkr link

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>

【讨论】：

我确实设置了它。我只是没有显示它，因为它是一个小代码sn-p。
对不起，如果是这样。然后只是变量命名:) 我做了一些额外的改变，比如 app.controller('myController', function ($scope) { }); myController - 更改名称以免将来混淆，并且您在 [] 中有包装器功能；我已经删除了它们