Javascript AngularJS:在ng repeat中更新范围

我有一个带有几个嵌套控制器和视图的Angular应用程序。我根据ngInfiniteScrolling的本教程在其中实现了无限滚动：

因此，我有一个服务，它将项目加载到

$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>


// ...
不知何故，修复了它。这是我从
app.config（）
之前的路径：

$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'
    })

下面是之后的：

$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'
    })

它是有效的。如果有人能提供解释，我将把答案归功于他们。
angular中的路由就是这样工作的

当我们为$stateProvider提供一个控制器时，它实际上被视为一个新的构造函数（java中的new关键字），因此数据被重新初始化为默认值。
新的构造函数将是其自身的子级，要访问父控制器，可以使用$parent
粘贴html吗？我打赌这是范围继承的问题。我认为@lowcs可能是正确的。您可以尝试通过将“内容”嵌套在另一个对象中（例如，
$scope.nested.content
）来破坏范围。如果只是一个隔离作用域断开了两个内容引用，那么这可能会解决您的问题。我将尝试进一步嵌套它。我尝试了
$scope.nested.content=new content（）
，然后
$scope.nested.content=new Search（）
，但没有成功。我理解得对吗？呃，我不知怎么把它修好了。我将发布答案。