AngularJS：在 ng-repeat 中更新范围

Question

我有一个带有多个嵌套控制器和视图的 Angular 应用程序。我根据 ngInfiniteScrolling 的本教程在其中实现了无限滚动：http://binarymuse.github.io/ngInfiniteScroll/demo_async.html

所以我有一项服务可以将项目加载到位于 $scope.content.items 的数组中。然后有一个显示每个结果的 ng-repeat 元素。

$scope.content = new Content()
$scope.content.loadMore( $scope.currentStream, 2 ) // this part is actually called in the HTML, but while debugging I've just done it in the controller

现在我想实现搜索，而不是制作另一个搜索页面，只需加载项目来代替当前的项目列表。基本上取代 $scope.content.items.

所以我构建了一个相同的控制器，但现在调用我的搜索 API。我使用 ng-change 查看是否有人在搜索框中输入，然后在调用的函数中执行

$scope.search = function() {
    $scope.content = new Search()
    $scope.content.load( $scope.query )
}

我可以看到这在控制台中有效，它取代了 $scope.content.items，方法是在浏览器控制台中这样做：

var scope = angular.element($('[ng-controller=HomeController]')).scope()
scope.content.items

这显示了我在每种情况下期望的对象数组（触发 ng-change="search()" 之前或之后）。但是页面本身不会更新。它只显示来自 Content() 服务的内容。

同样，如果我将控制器中的上述两行替换为以下内容，它会显示来自 Search() 服务的内容：

$scope.content = new Search()
$scope.content.load( 'thom' )

长话短说，我觉得服务和 API 工作正常，但是当我更改使用的 $scope.content.items 数组时页面没有更新ng-repeat.

这里是HTML

<div class="panel panel-item" ng-repeat="item in content.items" ng-hide="hideItem">
    <h2 ng-hide=" item.stream == 'read' " data-ng-bind="item.title"></h2>

    <a ng-click="openReaderModal( item )" class="cursor-pointer" ng-show=" item.stream == 'read' ">
        <h2 data-ng-bind="item.title"></h2>
    </a>

    // ...

    <div class="clearfix"></div>
</div>

Answer 1

以某种方式修复了它。这是我从 app.config() before:

开始的路线

$stateProvider
    // ...
    .state( 'app', {
        url: '/app',
        templateUrl: 'app/views/app.html',
        controller: 'HomeController'
    })
    .state( 'app.home', {
        url: '/main',
        templateUrl: 'app/views/home.html',
        controller: 'HomeController'
    })
    .state( 'app.profile', {
        url: '/profile',
        templateUrl: 'app/views/profile.html',
        controller: 'ProfileController'
    })
    .state( 'app.read', {
        url: '/read',
        templateUrl: 'app/views/stream-content.html',
        controller: 'HomeController'
    })
    .state( 'app.watch', {
        url: '/watch',
        templateUrl: 'app/views/stream-content.html',
        controller: 'HomeController'
    })
    .state( 'app.listen', {
        url: '/listen',
        templateUrl: 'app/views/stream-content.html',
        controller: 'HomeController'
    })

这里是在之后：

$stateProvider
    // ...
    .state( 'app', {
        url: '/app',
        templateUrl: 'app/views/app.html',
        controller: 'HomeController'
    })
    .state( 'app.home', {
        url: '/main',
        templateUrl: 'app/views/home.html'
    })
    .state( 'app.profile', {
        url: '/profile',
        templateUrl: 'app/views/profile.html',
        controller: 'ProfileController'
    })
    .state( 'app.read', {
        url: '/read',
        templateUrl: 'app/views/stream-content.html'
    })
    .state( 'app.watch', {
        url: '/watch',
        templateUrl: 'app/views/stream-content.html'
    })
    .state( 'app.listen', {
        url: '/listen',
        templateUrl: 'app/views/stream-content.html'
    })

并且有效。如果有人可以提供解释，我会将答案归功于他们。

Answer 2

angular中的路由是这样工作的。

当我们为 $stateProvider 提供控制器时，它实际上被视为一个新的构造函数（java 中的新关键字）因此数据是 re-initiated 默认值。新的构造函数将是 child 本身，要访问 parent 控制器，可以使用 $parent

AngularJS：在 ng-repeat 中更新范围

AngularJS : Updating scope in ng-repeat

javascript

angularjs

angularjs-scope

angularjs-ng-repeat