Question

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

Answer 1

替换

<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

{{}}表示您想在视图中输出控制器中的内容。

Answer 2

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

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

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

此外，ng-model仅适用于input元素，但您使用的是label。以下更改为welcome。

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

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

Answer 3

同意Pankaj Parkar

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

plnkr link

＆＃13;

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.';
});

＆＃13;

<!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>

＆＃13;

从AngularJS将文本插入HTML

3 个答案: