AngularJS:范围变量未在视图中更新

时间:2014-10-06 16:01:14

标签: angularjs

似乎我的视图变量没有更新onSubmit事件。 我可以在控制台中看到对API的执行调用获得了正确的结果,但我没有正确显示它们。

JS

     angular.module('FooApp')
     .controller('FooListController', ['$scope', 'FooMapper', 'moment', 'APP_URL', '$location', function($scope, FooMapper, moment, APP_URL, $location) {


         $scope.submit = function (){

             var promise = FooMapper.find($scope.fooName);

             console.log('-- Search string: '+ $scope.fooName);
             $scope.isLoading = 0;
             promise.then(function(foo){

                 console.log('New Promise foo: ', foo);
                 $scope.fooResults = foo;

             })
         } // end of anonymous function

}
]);

HTML

<div ng-include="APP_URL + '/view/fooResolver/searchForm.html'" ng-controller="FooListController">   </div>
    <div ng-if="!isLoading" class="row">

        <div ng-if="!fooResults" class="col-md-12">
            <div class="alert alert-warning">
                No foos found.
            </div>
        </div>

        <div ng-if="fooResults" class="col-md-12">

                        <tr ng-repeat="foo in fooResults" class="active">

                            <td>
                                {{foo.id}}
                            </td>
                            <td>
                                <b>{{foo.name}}</b>
                            </td>
                            <td>
                                {{foo.country}}
                            </td>
    ....

我也试过$ scope。$ apply()但仍然得到相同的结果。 我有可能有多个范围吗?

谢谢。

1 个答案:

答案 0 :(得分:1)

@Mohammad Sepahvand关于使用ng-ifng-include创建的新范围是正确的,但是,我建议您避免使用$parent。我认为这可以创建易碎且难以维护的代码。

子范围通过原型继承从父范围继承属性。关于“在你的模型中添加一个点”的“旧”Angular说明你在父范围内(在你的控制器中)做了类似的事情:

$scope.model = { fooModel: null };

这声明了一个模型对象,它将在原型继承中存活下来。如果没有模型中的“点”,则子范围的属性将遮蔽父范围中的值。

解决$promise后,您就会在$scope.model.fooModel上设置新值。

虽然这与使用$parent.fooModel实际上是相同的,但使用$parent意味着你依赖于这个父子关系(这让我觉得很脏)。如果您稍后重构HTML视图会导致更多/更少的父/子关系,会发生什么?