Почему я не могу привязать значение инициированной переменной приложения к элементу управления вводом HTML с помощью 'ng-bind'?

Я новичок в этой вещи под названием «AngularJS», поэтому я застрял в одном месте.Почему я не могу привязать значение инициированной переменной приложения к элементу управления вводом HTML с помощью 'ng-bind'?

Рассмотрим следующий пример кода:

<!DOCTYPE html> 
<html> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
    <body> 
    <div ng-app="" ng-init="firstName='John'"> 
     <p>Input something in the input box:</p> 
     <p>Name: <input type="text" ng-bind="firstName"></p> 
     <p>You wrote: {{ firstName }}</p> 
    </div> 
    </body> 
</html>

В приведенном выше примере, почему я не могу связать значение переменной приложения «FirstName» в HTML-ввода текста управления usng «нг-привязки»?

и предположим, я пишу код, как показано ниже:

<!DOCTYPE html> 
<html> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
    <body> 
    <div ng-app="" ng-init="firstName='John'"> 
     <p>Input something in the input box:</p> 
     <p>Name: <input type="text" ng-model="firstName"></p> 
     <p>You wrote: {{ firstName }}</p> 
    </div> 
    </body> 
</html>

В приведенном выше примере можно связать значение переменной приложения «FirstName» в HTML-ввода Conrol с использованием «нг-модель».

Может кто-то прояснить мне разницу между двумя вышеуказанными кодами в легко понятном языке?

Кроме того, обратите внимание на ниже фрагменте кода:

<!DOCTYPE html> 
<html> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
    <body> 
    <div ng-app="" ng-init="firstName='John'"> 
     <p>The name is <span ng-bind="firstName"></span></p> 
    </div> 
    </body> 
</html>

В приведенном выше (третий) пример того, как я мог бы быть в состоянии связать значение переменной приложения «FirstName» в <p> тега?

Кто-то, пожалуйста, объясните мне.

Спасибо.

источник

2016-03-13 user2839497

насколько разница между 'ng-model' и' ng-bind' вы попробовали прочитать документацию для обоих? – charlietfl

ng-bind делает одностороннее связывание между вашим контроллером и представлением. В этом случае представление будет отражать только изменения, внесенные в контроллер, но не наоборот. Это то же самое, что и использование двойной скобки нотации {{variable}}

С другой стороны, ng-модель делает двойное связывание, то есть изменения, сделанные в представлении (обычно в форме ввода), будут Доступно автоматически в контроллере, а также изменения, сделанные в контроллере будет обновлена в представлении

проверки этот ответ: https://stackoverflow.com/a/12420157/5186787

Что касается фрагмента, вы можете просто сделать:

<!DOCTYPE html> 
    <html> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script> 
     <body> 
     <div ng-app="myApp" ng-controller='myController'> 
      <p>{{firstName}}</p> 
     </div> 
     </body> 
    </html>

Какие реализует один путь привязывать. Итак, если у вас есть приложение определяется следующим образом:

var app=angular.module('myApp',[]); 

    app.controller('myController', ['$scope',function($scope){ 
     $scope.firstName = 'John Doe'; 
    }]);

Было бы одностороннюю связывание между вашей переменной firstName в контроллере и представлении.

Лучше использовать контроллеры для такого типа работ.

источник

2016-03-13 19:54:48

Вот пример: https://jsbin.com/fifizezanu/edit?html,js,output –

Почему я не могу привязать значение инициированной переменной приложения к элементу управления вводом HTML с помощью 'ng-bind'?

ответ

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