Question

On dropdown on-change我正在调用我的AngularJs服务，它以Json格式返回数据。我可以确认on-change事件确实调用了服务方法，它确实返回了数据但是由于某些原因我无法显示加载的日期。经过一些研究，我的理解是使用$ scope。$ apply（）;然而它似乎没有做任何事情。

以下是我的代码：

HTML

<div ng-controller="VacancyController">

    <p>Select a Vacancy:</p>
    <select ng-model="selectedVacancy" ng-options="x.name for x in vacancieslist" ng-change="getAllTeachers()"></select>
    <h1>Your selected Vacancy Title is : {{selectedVacancy.name}}</h1>
</div>

<div id="content" ng-controller="HomeController">
    <div ng-class="result">{{message}}</div>
        <div class="col-xs-12 col-sm-offset-3 col-sm-6">
        <ul class="list-group tab-main" id="contact-list">


            <li class="list-group-item" ng-repeat="teacherModel in ListTeachers">
                <div class="col-xs-12 col-sm-3">
                    <img src="http://api.randomuser.me/portraits/men/49.jpg" alt="Scott Stevens" class="img-responsive img-circle" />
                </div>
                <a href="#" ng-click="openPanelRight(teacherModel)" title="Edit Record">
                    <div class="col-xs-12 col-sm-9">
                        <span class="name">{{teacherModel.TeaFName}} {{teacherModel.TeaSName}}</span><br />
                        <span class="fa fa-comments text-muted c-info" data-toggle="tooltip" title="{{teacherModel.TeaEmail}}"></span>
                        <span class="visible-xs"> <span class="text-muted">{{teacherModel.TeaEmail}}</span><br /></span>
                    </div>
                </a>
                <div class="clearfix"></div>
            </li>
        </ul>
    </div>
</div>

AngularJS控制器

    app.controller('VacancyController', ['$scope', 'VacancyService' ,'$timeout', function ($scope, VacancyService, $timeout) {
    $scope.GetVacancies = function () {
        $scope.vacancieslist = [];

        var getData = VacancyService.Vacancies();
        getData.then(function (ord) {
            angular.forEach(ord.data, function (val) {
                if ($.trim(val).length > 0) {
                    var obj = new Object();
                    obj.name = val.VacTitle;
                    obj.id = val.VacNo;
                    if (val.VacNo > 0) {
                        $scope.vacancieslist.push(obj);
                    }
                }
            });
        }, function () {
            genericService.warningNotify("Error in getting List of Vacancies");
        });
    }

    $scope.getAllTeachers = function () {

        VacancyService.getAllData().then(function (response) {
            console.log('fired');
            $scope.ListTeachers = response.data;

            $timeout(function () {
                $scope.$apply();
            }, 0);

        });
    }

    $scope.GetVacancies();
}]);

服务

app.service("VacancyService", ['$http', '$location', function ($http, $location) {


    this.getAllData = function () {
        var response = $http({
            method: 'GET',
            url: '/Home/GetAllData'
        });
        return response;
    }

}]);

Answer 1

    <div ng-controller="VacancyController">

        <p>Select a Vacancy:</p>
        <select ng-model="selectedVacancy" ng-options="x.name for x in vacancieslist" ng-change="getAllTeachers()"></select>
        <h1>Your selected Vacancy Title is : {{selectedVacancy.name}}</h1>


    <div id="content">
        <div ng-class="result">{{message}}</div>
            <div class="col-xs-12 col-sm-offset-3 col-sm-6">
            <ul class="list-group tab-main" id="contact-list">


                <li class="list-group-item" ng-repeat="teacherModel in ListTeachers">
                    <div class="col-xs-12 col-sm-3">
                        <img src="http://api.randomuser.me/portraits/men/49.jpg" alt="Scott Stevens" class="img-responsive img-circle" />
                    </div>
                    <a href="#" ng-click="openPanelRight(teacherModel)" title="Edit Record">
                        <div class="col-xs-12 col-sm-9">
                            <span class="name">{{teacherModel.TeaFName}} {{teacherModel.TeaSName}}</span><br />
                            <span class="fa fa-comments text-muted c-info" data-toggle="tooltip" title="{{teacherModel.TeaEmail}}"></span>
                            <span class="visible-xs"> <span class="text-muted">{{teacherModel.TeaEmail}}</span><br /></span>
                        </div>
                    </a>
                    <div class="clearfix"></div>
                </li>
            </ul>
        </div>
    </div>
</div>
    </div>

Answer 2

最简单的解决方案是使用parent - ＆gt;子控制器选项，然后使用

$scope.$parent.function

访问父方法，这样你甚至不需要调用.apply，它会为你绑定更新的数据。

刷新AngularJs中的部分页面内容

2 个答案: