$ scope范围变更

时间:2017-02-14 21:52:08

标签: angularjs

我的功能非常简单,我必须想象很常见。我有一个页面列出了一组年龄组',并提供了添加“年龄组”的功能。我只是希望在一个新的年龄组'已添加。

在早期版本中,我只是在我的服务中使用$ rootScope来放置所有年龄组'在$ http请求完成时在$ rootScope中。在这个最新的重构中,我在我的应用程序中删除了$ rootScope的所有使用,并且它变得有问题。

HTML视图的代码如下: [注意:所有被视为无关的代码已从所有代码段中删除]

<div id="tabContent" class="tab-pane fade in active" ng-show="subIsSelected(1)">
    <div class="row">
        <div class="col-xs-12">
            <form class="form-inline">
                <button type="button" class="btn btn-success" ng-click="openAddAgeGroup()">Add Age Group</button>                  
            </form>
        </div>
    </div>
    <hr />
    <div class="row row-content">                    
        <div class="col-xs-12">
            <h4 ng-show="!areAgeGroups()">No current age groups.</h4>
            <ul class="media-list" ng-show="areAgeGroups()">
                <li class="media" ng-repeat="ageGroup in ageGroups" style="padding:10px; background: lightGray;">
                    <div class="media-left media-top" >
                        <img class="media-object img-thumbnail" style="width: 75px;" ng-src="./images/trfc.png" alt="club logo">
                    </div>
                    <div class="media-body">
                        <h3 class="media-heading" style="padding-top: 20px;">{{ageGroup.name}}</h3>
                        <button type="button" class="btn btn-xs btn-primary" style="width: 50px;" ng-click="openEditAgeGroup(ageGroup)">Edit</button>
                        <button type="button" class="btn btn-xs btn-danger" style="width: 50px;" ng-click="deleteAgeGroup(ageGroup)">Delete</button>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

首次加载时,该页面会正确显示所有年龄组&#39;在$ scope.ageGroups数组中。

点击按钮添加&#39;年龄组&#39;,按如下方式创建ng对话框:

$scope.openAddAgeGroup = function() {
    console.log("\n\nOpening dialog to add age group");
    ngDialog.open({ template: 'views/addAgeGroup.html', scope: $scope, className: 'ngdialog-theme-default', controller:"HomeController" });
};

并且该对话框填充如下:

<div class="ngdialog-message">
    <div class="">
        <h3>Add a New Age Group</h3>
    </div>
    <div>&nbsp;</div>
    <div>
        <form ng-submit="addAgeGroup()">
            <div class="form-group">
                <label class="sr-only" for="name">Age Group Display Name</label>
                <input type="text" class="form-control" id="name" placeholder="age group name" ng-model="ageGroupForm.name">
            </div>
            <div class="form-group">
                <label class="sr-only" for="birthyear">Birth Year</label>
                <input type="text" class="form-control" id="birthyear" placeholder="birth year" ng-model="ageGroupForm.birthyear">
            </div>
            <div class="form-group">
                <label class="sr-only" for="socceryear">Soccer Year</label>
                <div class="input-group">
                    <div class="input-group-addon">U</div>
                    <input type="text" class="form-control" id="socceryear" placeholder="soccer year" ng-model="ageGroupForm.socceryear"> 
                </div>                               
            </div>
            <button type="submit" class="btn btn-info">Add</button>
            <button type="button" class="btn btn-default" ng-click=closeThisDialog("Cancel")>Cancel</button>
        </form>
    </div>
</div>

提交表单后,&#39;年龄组&#39;从控制器添加到数据库:

'use strict';

angular.module('ma-app')
    .controller('HomeController', ['$scope', 'ngDialog', '$state', 'authService', 'coreDataService', 'userService', '$rootScope', 'clubService', 'schedulingService', function($scope, ngDialog, $state, authService, coreDataService, userService, $rootScope, clubService, schedulingService) {

...

    $scope.addAgeGroup = function() {
        coreDataService.addAgeGroup($scope.ageGroupForm)
            .then(function(response) {
                coreDataService.refreshAgeGroups()
                    .then(function(response) {
                        coreDataService.setAgeGroups(response.data);
                        $scope.ageGroups = coreDataService.getAgeGroups();
                        console.log("\n\n\nretrieved age groups and put them in scope");
                        console.log($scope.ageGroups);
                        ngDialog.close();
                    }); 
            }, function(errResponse) {
                console.log("Failed on attempt to add age group:");
                console.log(errResponse);
            });   
    };

coreDataService定义如下:

'use strict';

angular.module('ma-app')

    .service('coreDataService', ['$http', 'baseURL', 'googleGeolocateBaseURL', 'googleGeocodeKey', 'googleMapsBaseURL', function($http, baseURL, googleGeolocateBaseURL, googleGeocodeKey, googleMapsBaseURL) {
        var ageGroups = {};
        var ageGroupsLoaded = false;       


        this.getAgeGroups = function() {
            return ageGroups;
        };

        this.setAgeGroups = function(newAgeGroups) {
            ageGroups = newAgeGroups;
            ageGroupsLoaded = true;
        };

        this.addAgeGroup = function(formData) {
            //post age group:            
            var postString = '{ "birth_year": "' + formData.birthyear + '", "soccer_year": "U' + formData.socceryear + '", "name": "' + formData.name + '" }';
            console.log("Posting age group with string: " + postString);
            return $http({
                url: baseURL + 'age_groups/',
                method: 'POST',
                headers: {
                    'content-type': 'application/json' 
                },
                data: postString
            });
        };      
    }]);

所以,当一个年龄组&#39;添加,控制台日志记录表明新的&#39;年龄组&#39;现在存储在$ scope.ageGroups数组中的集合中,但HTML的重复次数并未反映新的&#39;年龄组&#39;。仅当我导航到界面中的另一个选项卡,然后返回到包含&#39;年龄组的选项卡时。是新增加的&#39;年龄组&#39;显示。

3 个答案:

答案 0 :(得分:0)

更新: 更新您的值后,您需要告诉angular它已更新。如果你将代码包装在$ timeout中。在下一个摘要周期中,视图将更新。有关详细信息,请参阅here

...
$timeout(function() {
    $scope.ageGroups = coreDataService.getAgeGroups();
  // anything you want can go here and will safely be run on the next digest.
})
...

$ timeout基本上在下一个$ digest周期运行,从而在视图中更新你的值。

答案 1 :(得分:0)

我建议将from bs4 import BeautifulSoup xml_text = open('US_2171_ProductPricing_20170206233707.xml').read() soup = BeautifulSoup(xml_text, 'html.parser') products = soup.findAll('product') data = [(p['productcode'], p['statuscode'], p.findAll('pricing')[0]['catalogprice']) for p in products] for items in data: print(', '.join(items)) 部分包装在ng-repeat中,在add方法上触发事件并从指令中听取它:

directive

在指令链接功能中:

this.addAgeGroup = function(formData) { 
   // do stuff
   $scope.$broadcast('itemadded');
}

答案 2 :(得分:0)

我建议使用ControllerAs语法,如果绑定到的数组得到更新,它将刷新ng-repeat。

请参阅此处给出的答案 - ng-repeat not updating on update of array