为什么AngularJS在页面加载时没有自动绑定属性?包括一个非常简单的例子

Why is AngularJS not autobinding property on page load? Very simple example included

本文关键字：包括一 属性 非常 简单 绑定 AngularJS 加载 为什么      更新时间：2024-04-25

这里是一个在$scope上具有两个属性的Angular控制器的示例。firstName属性被设置为函数对象（我知道这被设置为一个函数对象，而不是函数返回的字符串！），lastName属性被设为字符串。

<html ng-app>
  <head>
    <meta charset="utf-8">
    <title>Angular.js Example</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
    <script>
      function NameCtrl($scope){
        $scope.firstName = function() {return "John"; };
        $scope.lastName = 'Smith';
      }
    </script>
  </head>
  <body ng-controller="NameCtrl">
    First name:<input ng-model="firstName" type="text"/>
    <br>
    Last name:<input ng-model="lastName" type="text"/>
    <br>
    Hello {{firstName}} {{lastName}}
  </body>
</html>

http://jsbin.com/hifutaxozo/1/edit

虽然将属性设置为函数很傻，但请耐心等待。我只是好奇AngularJS的内部结构。在文本框中，绑定后，我得到了函数的字符串表示，这是有意义的。然而，在HTML文本中，我没有得到函数的字符串表示。但是，如果在angular绑定后对文本框中的函数字符串进行更改，则这些更改将反映在HTML中。为什么函数的字符串表示在HTML文本中没有绑定，而在输入框中绑定？

ng-model不能是函数，更改：

$scope.firstName = function() {return "John"; };

至

$scope.firstName = "John";

当你想呈现函数的输出时，你需要首先评估函数：

Hello {{firstName()}} {{lastName}}

但是，你的ng-model不可能是一个函数。

我猜angular开发人员已经选择在您试图传递给ng-model的任何内容上运行toString()（至少对于输入类型=text）。这是有意义的，因为它必须放在一个文本框中，并且必须由用户编辑。不管你在输入type=text中输入什么，都应该是一个字符串：）在这种情况下，运行一个函数没有多大意义。

在HTML模板中，您需要输出一个值或它将绑定到的对象。｛｛firstName（）｝｝就可以了。

您可以使用对象和返回函数来获取名称。试用原型。

  function NameCtrl($scope){
    var objectPerson = function()
    {
        this.name = "John";
    };
    objectPerson.prototype.GetName = function(){ return this.name ;};
    var something = new objectPerson();
    $scope.firstName = something.GetName()
    $scope.lastName = 'Smith';
  }

为什么它不能像你那样工作对我来说有点奇怪，但我想这是因为它需要一个字符串。如果有人能更清楚地解释为什么会这样，我会很高兴

PS。我不知道这是否是一种好的风格，顺便说一句，我只是说它返回了你想要的

相关文章：