Question

我是这个名为AngularJS＆＃39; AngularJS＆＃39;所以我一度陷入困境。

考虑以下代码示例：

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

在上面的示例中，为什么我不能绑定应用程序变量的值＆＃34; firstName＆＃34;到HTML输入文本控制usng＆＃34; ng-bind＆＃34;？

并假设我编写如下代码：

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

在上面的示例中，我可以绑定应用程序变量的值＆＃34; firstName＆＃34;使用＆＃34; ng-model＆＃34;到HTML输入控件。

有人可以用易于理解的语言澄清上述两个代码之间的区别吗？

另外，请看下面的代码段：

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

在上面的（第三个）示例中，我如何能够绑定应用程序变量的值＆＃34; firstName＆＃34;到<p>代码？

有人请解释我。

感谢。

Answer 1

ng-bind在您的控制器和视图之间进行单向绑定。在这种情况下，视图将仅反映在控制器中所做的更改，而不是反之亦然。这与使用双括号表示法{{variable}}

相同

另一方面，ng-model进行双重绑定，即在视图中进行的更改（通常以输入形式）将在控制器中自动访问，并且控制器中所做的更改将在视图

检查此答案：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和视图之间建立单向绑定。

最好将控制器用于此类工作。

为什么我不能使用＆nbsp; ng-bind＆＃39;将启动的应用程序变量的值绑定到HTML输入控件？

1 个答案: