0

我是这个叫做“AngularJS”的新手，所以我一度陷入困境。

考虑以下代码示例：

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

在上面的示例中，为什么我不能使用“ng-bind”将应用程序变量“firstName”的值绑定到 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>Input something in the input box:</p>
      <p>Name: <input type="text" ng-model="firstName"></p>
      <p>You wrote: {{ firstName }}</p>
    </div>
  </body>
</html>

在上面的示例中，我可以使用“ng-model”将应用程序变量“firstName”的值绑定到 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>

在上面（第三个）示例中，我如何能够将应用程序变量“firstName”的值绑定到<p>标签？

有人请解释我。

谢谢。

4

1 回答 1

0

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它将在控制器中的变量和视图之间进行单向绑定。

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

于 2016-03-13T19:54:48.677 回答