问题描述:

I have a html page that has a input search at the top of the page.

below it I have a element that loads in a partial.

I'm trying to have the search bind to the partial.

It all works if I put the search inside the partial but for learning purposes I want to understand why it wont work outside it and how I could get it to work outside the partial.

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>

app JS

angular.module('F1FeederApp', ['F1FeederApp.controllers','F1FeederApp.services', 'ngRoute']).

config(['$routeProvider', function($routeProvider) {

$routeProvider.

when("/drivers", {templateUrl: "partials/drivers.html", controller: "driversController"}).

otherwise({redirectTo: '/drivers'});

}]);

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;

});

});

网友答案:

I think the primary problem is that you've got driversController used by the partial and the search area. This puts them in sister scopes. Make a controller in the body and a different one for the partial.

相关阅读:
Top