AngularJS $范围更新没有反映在视图中 [英] AngularJS $scope updates not reflected in the view

问题描述

首先，我很抱歉，如果我将是混乱的，但我解决这个问题，整个晚上，我读过几十个SO问题和AngularJS文章，所以我现在甚至不知道如果我知道哪来的问题：）

Firstly I am sorry if I will be confusing, but I'm solving this issue the whole evening, and I've read dozens of SO questions and AngularJS articles, so I'm not even sure now if I know where's the problem :)

我有一个NG-应用程序，在控制器的地方，当我定义默认数据的 $范围几个属性，认为停止得到更新时，后面的数据变化上编程。

I have an ng-app, where in the controller when I define default data for few properties of $scope, the view stops getting updated when this data changes later on programatically.

下面是我的code的简单的例子：

Here's a short example of my code:

...
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中，忽略了树枝逻辑PLS）：

Main markup, where the view is defined (Symfony2, ignore the twig logic pls):

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

模板的关键部分：

The crucial part of the template:

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

的主要问题是，当我有第2行控制器那里，数据是否正确取决于航线PARAMS初始化，但是只能执行 searchTitle（）它没有更新。当我删除了前两行，由路径定义的数据不拉（明显），但 searchTitle（）正确的方法既填充 mainfilter 字段和重复＆LT;李方式＆gt; 取值
我绝望了，我建议什么是错的范围，但我目前超载的信息，并且将AP preciate你的帮助，这样的！

The main problem is, when I have the first 2 lines of controller there, the data is correctly initialized depending on route params, but after executing searchTitle() it's not updated. When I remove the first two lines, the data defined by the route isn't pulled (obviously), but the searchTitle() method correctly populates both mainfilter field and the repeated <li>s. I'm desperate, I suggest something is wrong with the scope, but currently I'm information overloaded, and would appreciate your help, SO!

推荐答案

包装纸的初始状态/默认值控制器进入一个函数，调用它在 $ viewContentLoaded 事件帮助。这里是我的修正：

Wrapping the initial "state" / defaults for the controller into a function, and calling it upon $viewContentLoaded event helped. Here's my fix:

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

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

我仍然不知道为什么，如果默认的数据被正确的控制器code赋值只设置是导致视图被卡住这一数据，所以我愿意再次接受更好的答案，解释这个巫术。

I still have no idea why if the default data was set only by assigning values right in the controller code was causing the view to be "stuck" to this data, so I'm willing to re-accept a better answer, explaining this voodoo.

这篇关于AngularJS $范围更新没有反映在视图中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！