Question

我有一个简单的1页应用程序设计，在静态侧边栏和ng-view中有两个输入，我在控制器中通过$ http请求加载JSON数据。我使用ngRoute将不同的模板加载到视图中。

这是我的控制器的示例代码：

someModule.controller('JobPostingsCtrl', function($scope, $http) {

$scope.cityFilter = function() {
    $http.get("dir/"+$scope.locationFilter+".json")
       .then(function(res){
          $scope.jobs = res.data;
        });
};

$scope.searchFilter = function (jobposting) {

    var keyword = new RegExp($scope.keyword, 'i');

    return !$scope.keyword || keyword.test(jobposting.title);

};

$scope.locationFilter = $scope.locationFilter || 'all';

 $http.get("dir/"+$scope.locationFilter+".json")
   .then(function(res){
      $scope.jobs = res.data;
    });
});

在我的index.html中，我使用输入字段标记侧边栏，输入字段是locationFilter和关键字的模型：

<input type="search" name="search" id="search" ng-model="keyword">
<input type="search" name="location" id="location" ng-model="locationFilter">
<button id="go" ng-click="cityFilter();">Click</button>

在加载时，视图会显示全部＆＃39;数据通常和searchFilter（基于关键字模型）按预期在范围内工作。

然而，当我单击cityFilter（）按钮时，控制器确实获取了新数据（如果我在cityFilter（）函数中执行console.log($scope.jobs)，我在控制台中看到了预期的JSON对象）但视图确实不反映这些变化。

为什么视图会反映关键字模型中的更改，但不会反映cityFilter（）的更改？如果范围不同，正如我首先想到的那样，两者都不应该无效吗？

我这样设置，因为我希望可以从应用程序的任何位置访问侧边栏。我很困惑的事实是我的控制器似乎知道$ scope变量的变化但是没有传输＆＃39;根据Angular文档，即使ng-click位于$ apply内，它们也会显示在视图中。我知道我做错了什么？

编辑：使用routeProvider加载我的初始模板的方式：

angular.module（＆＃39; someModule＆＃39;，[＆＃39; ngRoute＆＃39;]）。config（[＆＃39; $ routeProvider＆＃39;，＆＃39; $ locationProvider＆＃39; ，

function($routeProvider) {

  $routeProvider

    .when('/', {

        templateUrl: 'dir/views/job-posting.html',

        controller: 'JobPostingsCtrl'

    })
...

模板的HTML：

<div ng-repeat="job in jobs | filter:searchFilter>
 {{ job.someProperty }}
</div>

index.html：

<div ng-controller="MasterCtrl">

    <div id="sidebar" ng-controller="JobPostingsCtrl">

            <input type="search" name="search" id="search" ng-model="keyword">

            <input type="search" name="location" id="location" ng-model="locationFilter">

            <button id="go" ng-click="cityFilter();">Click</button>

    </div>

    <div ng-view></div>

</div>

访问ngRoute中的范围

0 个答案: