Вставка текста в HTML от AngularJS

В моем index.html файле, я создал очень голые кости. Я разделил большую часть деталей на app.js, так что если кто-то хочет, чтобы их версия формы выглядела по-другому, им просто нужно вставить измененную копию app.js (пытаясь перейти на переносимость здесь).Вставка текста в HTML от AngularJS

Однако, я очень новичок в 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, поэтому я действительно не знаю, что попытаться исправить отсюда.

источник

2016-04-27 UnworthyToast

Имя переменной не может иметь особого символа (кроме _,, $), когда вы определяете непосредственно после . (точка). Это причина, по которой код контроллера вызывает ошибку, поскольку на странице ничего не отображается.

Вы могли бы определить, что свойство, указав ключ над $scope объекта как

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

ng-model Дополнительно будет работать на input элемент только, но вы используете более label. Сделайте ниже, чтобы изменить на welcome.

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

Но В идеале вы не должны определять области видимости переменных в таком формате. Предпочтительным способом было бы использовать camelCase при определении переменных.

источник

2016-04-27 17:31:20

заменить

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

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

ng-model означает, что вы хотите двунаправленное связывание, и используется, например, с input с, так что, когда вы начинаете набирать в input , значение хранится внутри всего, что вы ссылаетесь через ng-model, т.е.

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

сохранит свой вклад в $scope.inputValue

{{}} означает, что вы хотите вывести что-то из контроллера в представлении.

источник

2016-04-27 17:31:43 Ozrix

Теперь имеет смысл понять, что вы прояснили эту разницу для меня. Это сработало! Мне просто пришлось изменить переменную 'service-desk-name' на' servicedeskkiosk' для исправления синтаксической ошибки. – UnworthyToast

правда, не заметил этого! – Ozrix

Согласен с Pankaj Parkar

Кроме того, вы не можете получить значение в этом случае, потому что вы не установили "нг-приложение"

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>

источник

2016-04-27 18:04:52

Я устанавливаю его. Я просто не показывал его, потому что это был небольшой фрагмент кода. – UnworthyToast

Извините, если да. Тогда просто переименование переменных :) Я внес некоторые дополнительные изменения, такие как app.controller ('myController', function ($ scope) {}); myController - изменить имя, чтобы не путать в будущем , и у вас есть функция обертки в []; Я удалил их –

Вставка текста в HTML от AngularJS

ответ

Смежные вопросы