Question

我对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中添加了“query”和“prop”，为什么？

并在两种情况下过滤：查询不过滤：查询[prop]，为什么？

我知道prop用于保存值“name”，..等，而query.name或query.salary应该是这种情况，而不是它在angular.js代码下工作的方式。

我想要一个很好的解释

Answer 1

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

因此，在您的第一个示例中，ng-model上的input设置为query。 query将自动添加到范围中。因此，没有必要明确添加它。但是，明确添加它很好（如果你愿意）。但是，您可能只是将其初始化为null，因此没有太多值（除非您有值绑定）。

在第二个示例中，它使用filter query[prop]：

对象：模式对象可用于过滤特定属性数组包含的对象。例如{name：“M”，phone：“1”} 谓词将返回具有属性名称的项目数组包含“M”和包含“1”的财产电话。一个特殊的财产可以使用name $（如{$：“text”}）来接受任何匹配对象的属性。这相当于简单的子串如上所述匹配字符串。

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

希望这有帮助。

为什么需要在Angularjs中的$ scope中创建显式对象

1 个答案: