0

我对 Angular.js 的 $scope 依赖注入有很多疑问

但首先我想向您展示我创建的两个示例,

第一个例子:如下,这里我在一个表中搜索员工,代码如下,

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

第二个例子:现在我根据搜索类型搜索员工,代码如下,

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

在以上两种情况下,我都有一些问题,

在第一个示例中,我将“查询”创建为 ng-model,但未明确添加到 $scope,为什么?

但是在第二个示例中,我在 $scope 中添加了“查询”和“道具”,为什么?

在这两种情况下过滤器:查询而不是过滤器:查询 [prop],为什么?

我知道 prop 用于保存值“name”,.. 等,并且 query.name 或 query.salary 应该是这种情况,但它在 angular.js 代码下是如何工作的。

我想要一个很好的解释

4

1 回答 1

0

$scope如果 Angular 在编译时在标记中找到它们,它将自动创建(链接)属性。

因此,在您的第一个示例中,ng-modeloninput设置为query. query将自动添加到范围。因此,没有必要显式添加它。但是,明确添加它是好的(如果你愿意的话)。但是,您可能只是将其初始化为 null,因此没有太多价值(除非您有要绑定的值)。

在第二个示例中,它使用了以下功能filter

对象:模式对象可用于过滤数组包含的对象的特定属性。例如 {name:"M", phone:"1"} 谓词将返回属性名称包含“M”和属性 phone 包含“1”的项目数组。可以使用特殊的属性名称 $(如 {$:"text"})来接受与对象的任何属性的匹配。这相当于上面描述的与字符串的简单子字符串匹配。

因此,有必要将查询初始化为对象。然后,在标记内部,使用 thisquery[prop]动态添加一个名为的属性,该属性是prop查询对象的值。这使过滤器看起来像{ valueOfProp: "inputValue"}. 如果您尝试在第二个示例中动态添加要查询的属性,而不进行初始化,则该对象将未定义并失败。因此,我们必须至少初始化为一个空对象。

希望这可以帮助。

于 2013-10-31T12:00:21.340 回答