为什么AngularJS在页面加载时没有自动绑定属性？ 包括非常简单的例子
[英]Why is AngularJS not autobinding property on page load? Very simple example included
问题描述
Here is an example of an Angular controller with two properties on the $scope. 
下面是一个Angular控制器的示例，它在$ scope上有两个属性。 The firstName property is set to a function object ( I understand that this is set to a function object, and not the string being returned by the function! ) and the lastName property is set to a string. 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 http://jsbin.com/hifutaxozo/1/edit
Although it's silly that I would have the property set to a function, bear with me here. 虽然我将该属性设置为函数是愚蠢的，但在这里请耐心等待。 I'm just curious about the internals of AngularJS here. 我只是对AngularJS的内部结构感到好奇。 In the text box, upon binding, I get the string representation of the function, which makes sense. 在文本框中，在绑定时，我得到函数的字符串表示，这是有道理的。 In the HTML text though however, I do not get the string representation of the function. 但是，在HTML文本中，我没有获得该函数的字符串表示。 However, if I make changes to the function string in the textbox after angular has bound it, then the changes get reflected in the HTML. 但是，如果我在angular绑定它之后对文本框中的函数字符串进行了更改，那么更改将反映在HTML中。 Why does the string representation of the function not get bound in the HTML text while it does in the input box? 为什么函数的字符串表示在输入框中没有绑定到HTML文本中？
3 个解决方案
解决方案1
2 2015-02-25 01:23:00
An ng-model must not be a function, change: ng-model不能是函数，更改：
$scope.firstName = function() {return "John"; };
to 至
$scope.firstName = "John";
And when you want to render the output of a function you need to evaluate the function first: 当您想要渲染函数的输出时，您需要首先评估函数：
Hello {{firstName()}} {{lastName}}
But yea, your ng-model can't be a function. 但是，你的ng-model不能成为一种功能。
解决方案2
1 2015-02-25 01:28:48
I'm guessing the angular developers have chosen to run toString() on whatever you try to pass to ng-model (at least for input type=text). 我猜测角度开发人员已选择在尝试传递给ng-model任何内容上运行toString() （至少对于输入类型=文本）。 This makes sense, as it has to be put in a textbox, and it has to be editable by the user. 这是有道理的，因为它必须放在文本框中，并且必须由用户编辑。 Whatever you put into a input type=text should be a string anyway :) Running a function would in that case don't make much sense. 无论你输入什么输入类型=文本应该是一个字符串无论如何:)在这种情况下运行一个函数没有多大意义。
While in the HTML template, you need to ouput a value, or object that it will bind to. 在HTML模板中，您需要输出它将绑定到的值或对象。 {{firstName()}} will do the trick. {{firstName（）}}可以解决问题。
解决方案3
0 2015-02-25 01:33:28
You can use an object and a return function to get The name. 您可以使用对象和返回函数来获取名称。 Try it with prototype. 尝试原型。
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';
}
Why it isn't working like you do is a little bit strange to me to but i guess its because its expecting a string. 为什么它不像你那样工作对我来说有点奇怪，但我猜它是因为它期待一个字符串。 If somebody has a clearer explanation why this is i would be thrilled 如果有人有更明确的解释，为什么这样我会很激动
PS. PS。 i don't know if this is good style btw i simply say it returns what you want 我不知道这是不是很好的风格，我只是说它能回报你想要的东西
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.