Question

首先我很抱歉，如果我会混淆，但我整个晚上都在解决这个问题，我已经阅读了几十个SO问题和AngularJS文章，所以我现在还不确定我是否知道哪里是问题：）

我有一个ng-app，当我为$scope的少数属性定义默认数据时，在控制器中，当以后以编程方式更改此数据时，视图会停止更新。

以下是我的代码的简短示例：

...
config(['$routeProvider', function($routeProvider) {
$routeProvider.
    when('/abc/:letter', {templateUrl: template, controller: FilterCtrl}).
    otherwise({redirectTo: '/abc/a'});
}])
...

控制器：

function FilterCtrl($scope, $http, $routeParams) {

    $scope.mainfilter = $routeParams.letter;
    $scope.listItems = $http.post($scope.url, {'filterType': 'abc', 'letter': $routeParams.letter});

    $scope.searchTitle = function(search) {
        $scope.mainfilter = 'Film: ';
        //just test code to see if the data changes, will be other http call actually
        $scope.listItems = $http.post($scope.url, {'filterType': 'abc', 'letter': 'n'});
    }
}

主要标记，定义视图（Symfony2，忽略树枝逻辑）：

    ...
    <div class="sort cell-1022 transparent-gray-back overflow-fix">

        <span class="sort--title">Search by</span>

        <select class="sort--selected chzn-select" ng-model="searchtitle" ng-change="searchTitle(searchtitle)">
            <option value="">film title</option>
            {% for id,title in titles %}
                <option value="{{ id }}">{{ title }}</option>
            {% endfor %}
        </select>

    </div>

</div>

<div class="divider transparent"></div>

<article class="wrapper">
    <div class="transparent-gray-back" ng-view>


    </div>

</article>

模板的关键部分：

<div class="scroll-list nice-scrollbars" >

    <span class="heading">{{ mainfilter.toUpperCase() }}</span>
    <ul class="item-list">
        <li ng-repeat="item in listItems.data | orderBy:order | filter:filter">
            <a ng-click="getRelated(item._id)">{{ item.title }}</a>
        </li>
    </ul>

</div>

主要问题是，当我在那里有前两行控制器时，数据根据路径参数正确初始化，但在执行searchTitle()之后它没有更新。当我删除前两行时，路由定义的数据不会被拉（显然），但searchTitle()方法会正确填充mainfilter字段和重复的<li>。< /强> 我很绝望，我建议范围有问题，但目前我的信息超载了，非常感谢你的帮助，SO！

Answer 1

将控制器的初始“状态”/默认值包装到函数中，并在$viewContentLoaded事件时调用它。这是我的修复：

$scope.$on('$viewContentLoaded', $scope.init);

$scope.init = function() {
    $scope.mainfilter = $routeParams.letter;
    $scope.listItems = $http.post($scope.url, {'filterType': 'abc', 'letter': $routeParams.letter});
}

我仍然不知道为什么如果仅通过在控制器代码中分配值来设置默认数据导致视图“卡住”此数据，所以我愿意重新接受更好的答案，解释这个伏都教。

Answer 2

您可以尝试以下方法吗？

更改您使用$ http.post的方式（在两个地方）。尝试使用它：

$http.post($scope.url, {'filterType': 'abc', 'letter': $routeParams.letter}).success(function(data) {
   $scope.listItems = data;
});

这意味着你的ng-repeat略有改变：

ng-repeat="item in listItems"

AngularJS $范围更新未反映在视图中

2 个答案: