为什么需要在Angular.js的$ scope中创建显式对象
[英]why need to create explicite object in $scope in Angular.js
问题描述
i have many questions regarding Angular.js's $scope dependency injection 
我对Angular.js的$ scope依赖项注入有很多疑问
but first i want to show you two examples which i created, 但首先，我想向您展示我创建的两个示例，
first example : is as follows, here i am searching employees present in a table, code as follows, 第一个示例：如下，这里我正在搜索表中存在的员工，代码如下，
<!DOCTYPE html>
<html ng-app="EmpApp">
<head>
<title>Plain Template</title>
<script type="text/javascript" src="D:/RahulShivsharan/Installers/AngularJS/angular.js"></script>
<script type="text/javascript">
var empApp = angular.module("EmpApp",[]);
empApp.controller("empCtrl",function($scope){
$scope.employees = [
{
"name" : "Manoj Bhandgar",
"age" : 23,
"profession" : "Computer Engineer",
"salary" : 30000
},
{
"name" : "Ajith Murgadoss",
"age" : 33,
"profession" : "Mechanical Engineer",
"salary" : 60000
},
{
"name" : "Swati Nandgaokar",
"age" : 28,
"profession" : "Electrical Engineer",
"salary" : 45000
},
{
"name" : "Fahim Ansari",
"age" : 49,
"profession" : "Advertising",
"salary" : 90000
}
];
});
</script>
</head>
<body ng-controller="empCtrl">
<table>
<tr>
<td align="right">Search Employee :</td>
<td><input type="text" ng-model="query"></td>
</tr>
</table>
<hr />
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Profession</th>
<th>Salary</th>
</tr>
<tr ng-repeat="emp in employees | filter: query">
<td>{{emp.name}}</td>
<td>{{emp.age}}</td>
<td>{{emp.profession}}</td>
<td>{{emp.salary}}</td>
</tr>
</table>
</body>
Second example: Now here i am searching employee depending on the search type, code as follows, 第二个示例：现在，我在这里根据搜索类型搜索员工，代码如下，
<!DOCTYPE html>
<html ng-app="EmpApp">
<head>
<title>Plain Template</title>
<script type="text/javascript" src="D:/Rahul Shivsharan/Installers/AngularJS/angular.js"></script>
<script type="text/javascript">
var empApp = angular.module("EmpApp",[]);
empApp.controller("empCtrl",function($scope){
$scope.employees = [
{
"name" : "Manoj Bhandgar",
"age" : 23,
"profession" : "Computer Engineer",
"salary" : 30000
},
{
"name" : "Ajith Murgadoss",
"age" : 33,
"profession" : "Mechanical Engineer",
"salary" : 60000
},
{
"name" : "Swati Nandgaokar",
"age" : 28,
"profession" : "Electrical Engineer",
"salary" : 45000
},
{
"name" : "Fahim Ansari",
"age" : 49,
"profession" : "Advertising",
"salary" : 90000
}
];
$scope.prop = {};
$scope.query = {};
});
</script>
</head>
<body ng-controller="empCtrl">
<table>
<tr>
<td align="right">Search Employee :</td>
<td><input type="text" ng-model="query[prop]"></td>
</tr>
<tr>
<td align="right">Search By :</td>
<td>
<select ng-model="prop">
<option value="$">ALL</option>
<option value="name">Name</option>
<option value="age">Age</option>
<option value="profession">Profession</option>
<option value="salary">Salary</option>
</select>
</td>
</tr>
</table>
<hr />
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Profession</th>
<th>Salary</th>
</tr>
<tr ng-repeat="emp in employees | filter: query">
<td>{{emp.name}}</td>
<td>{{emp.age}}</td>
<td>{{emp.profession}}</td>
<td>{{emp.salary}}</td>
</tr>
</table>
</body>
In above both of the case i have some questions, 在以上两种情况下，我都有一些疑问，
in First example I have created "query" as a ng-model but not explicitly added to $scope, why ? 在第一个示例中，我已将“查询”创建为ng模型，但未显式添加到$ scope中，为什么？
but in second example i have added "query" and "prop" in my $scope, why ? 但是在第二个示例中，我在$ scope中添加了“ query”和“ prop”，为什么？
and in both the case filter: query not filter: query[prop], why ? 在两种情况下，filter：query not filter：query [prop]为什么？
i understand that prop is used for holding the value "name", .. etc, and the query.name or query.salary should be the case, but than how its working beneath the angular.js code. 我知道prop用于保存值“ name”，..等，并且query.name或query.salary应该是这种情况，但比在angular.js代码下的工作方式更重要。
i want a good explanation 我想要一个很好的解释
1 个解决方案
解决方案1
0 已采纳 2013-10-31 12:00:21
Angular will automatically create (link) $scope properties if it finds them in markup when compiling. 如果在编译时Angular在标记中找到了它们，Angular将自动创建（链接） $scope属性。
So, in your first example, ng-model on the input is set to query . 因此，在您的第一个示例中， input上的ng-model设置为query 。 query will automatically be added to the scope. query将自动添加到范围。 So, it is not necessary to add it explicitly. 因此，没有必要显式添加它。 However, adding it explicitly is fine (if you want to). 但是，明确添加它是可以的（如果需要）。 But, you would probably just initialize it to null, so there isn't much value (unless you have a value to bind in). 但是，您可能只是将其初始化为null，所以没有太多价值（除非您有绑定的价值）。
In the second example, it is using a feature of filter : 在第二个示例中，它使用filter的功能 ：
Object: A pattern object can be used to filter specific properties on objects contained by array.
So, it is necessary to initialize query as an object. 因此，有必要将查询初始化为一个对象。 Then, inside the markup, using this query[prop] is dynamically adding a property named that is the value of prop to the query object. 然后，在标记内部，使用此query[prop]动态向查询对象添加一个名为prop的值的属性。 This allows the filter to look like { valueOfProp: "inputValue"} . 这使过滤器看起来像{ valueOfProp: "inputValue"} 。 If you try to dynamically add a property to query in the second example, without initialization, the object will be undefined and fail. 如果您尝试在第二个示例中动态添加属性以进行查询，而没有初始化，则该对象将是未定义的并且将失败。 Hence, we must initialize at least to an empty object. 因此，我们必须至少初始化为一个空对象。
Hope this helps. 希望这可以帮助。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.