從AngularJS插入文本到

在我的index.html文件中，我創建了一個非常簡單的表單。我已經將大部分細節分解爲app.js，這樣如果有人想讓他們的表單版本看起來不同，他們只需插入app.js的修改副本（試圖在此處進行移植）。從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 S，所以，當你開始輸入到input ，該值存儲在通過ng-model引用的任何內容中，即

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

將輸入保存到$scope.inputValue

{{}}意味着你要在視圖控制器輸出的東西。

來源

2016-04-27 17:31:43 Ozrix

現在你已經明白了這個區別。這工作！我只需將'service-desk-name'變量改爲'servicedeskkiosk'來修正語法錯誤。 – UnworthyToast

是真的，沒注意到！ – Ozrix

與潘卡Parkar同意

而且因爲你不設置「NG-應用程序：」你不能在這種情況下獲得價值

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'，函數（$ scope）{}）; myController - 將名稱更改爲不會在將來中混淆，並且您在[]中包裝函數;我刪除了它們 –

從AngularJS插入文本到

回答

相關問題