Angularjs 如何将搜索绑定到ng视图中的控制器_Angularjs

Angularjs 如何将搜索绑定到ng视图中的控制器

angularjs

Angularjs 如何将搜索绑定到ng视图中的控制器,angularjs,Angularjs,我有一个html页面，页面顶部有一个输入搜索。在它下面，我有一个部分加载的元素。我正在尝试将搜索绑定到部分。如果我把搜索放在部分中，这一切都会起作用，但出于学习目的，我想了解为什么它在部分之外不起作用，以及如何让它在部分之外起作用 HTML <body ng-app="F1FeederApp"> <div id="nav" ng-controller="driversController"> <input id="search" typ

我有一个html页面，页面顶部有一个输入搜索。在它下面，我有一个部分加载的元素。我正在尝试将搜索绑定到部分。如果我把搜索放在部分中，这一切都会起作用，但出于学习目的，我想了解为什么它在部分之外不起作用，以及如何让它在部分之外起作用

HTML

<body ng-app="F1FeederApp">
    <div id="nav" ng-controller="driversController">
        <input id="search" type="text" ng-model="nameFilter" placeholder="Serach" />
    </div>
    <ng-view></ng-view>
</body>

Controller.js

angular.module('F1FeederApp.controllers', []).
controller('driversController', function($scope, ergastAPIservice) {
      $scope.nameFilter = null;
      $scope.driversList = [];
        $scope.searchFilter = function(driver){
            var keyword = new RegExp($scope.nameFilter, 'i');
            return !$scope.nameFilter || keyword.test(driver.Driver.givenName) || keyword.test(driver.Driver.familyName);
        }
        ergastAPIservice.getList().success(function(response){
             $scope.driversList = response.MRData.StandingsTable.StandingsLists[0].DriverStandings;
        });
});

我认为主要的问题是部分和搜索区域使用了

driversController

。这就把它们放在姐妹望远镜里了。在主体中创建一个控制器，并为局部对象创建一个不同的控制器

在driversController中，您将nameFilter设置为null。试着把它去掉。哦，等等。。。你要起诉同一个控制员进行部分搜索？困惑…好吧，很好，但我如何将它们相互链接。搜索需要绑定到DriversControlleri作用域中的nameFilter。如果它是子作用域，它将继承，如果它不是兄弟作用域，它将继承。因此，如果在

body

HTML标记上说“MainController”，则ng视图位于该标记下方，ng视图范围将是“子范围”。但是您必须从

中删除ng控制器，因为这会在ng视图旁边创建一个作用域。。i、 e.兄弟姐妹。有意义吗？所以只需从

driversController

中删除

$scope.nameFilter=null

，并在body标记上定义一个空控制器。从第一个div中删除driversController，现在在

body

标记中创建的作用域将自动拾取

nameFilter

。现在，

driversController

仅在您的部分中，它将能够自动继承$scope.nameFilter。实际上，这可能不是因为原语很难继承，这就是为什么建议

ng模型中的任何东西都有一个点。。。i、 e.ng model=“thing.property”。
angular.module('F1FeederApp.controllers', []).
controller('driversController', function($scope, ergastAPIservice) {
      $scope.nameFilter = null;
      $scope.driversList = [];
        $scope.searchFilter = function(driver){
            var keyword = new RegExp($scope.nameFilter, 'i');
            return !$scope.nameFilter || keyword.test(driver.Driver.givenName) || keyword.test(driver.Driver.familyName);
        }
        ergastAPIservice.getList().success(function(response){
             $scope.driversList = response.MRData.StandingsTable.StandingsLists[0].DriverStandings;
        });
});