Question

我有一个演示应用程序，我希望通过该应用程序使用angularjs在页面（视图）中显示所有国家/地区的数据。

这是我的代码：

MyApp.js

var app = angular.module("MyApp", [ 'ui.bootstrap', 
                                'ngRoute',
                                'MyControllers',
                                'MyFactory' ]);

app.config(['$routeProvider', function($routeProvider) {
    $routeProvider
        .when('/home', {
            controller: 'MyController',
            templateUrl: 'resources/modules/homeView/homeView.jsp'
        })
        .when('/view1', {
            controller: 'MyController',
            templateUrl: 'resources/modules/view1/view1.jsp'
        })
        .when('/view2', {
            controller: 'MyController',
            templateUrl: 'resources/modules/view2/view2.jsp'
        })
        .otherwise({redirectTo: '/home'});
}]);

MyControllers.js

var controllers = angular.module('MyControllers', []);

controllers.controller('MyController', ['$scope', 'Factory', 
    function($scope, Factory) {
        $scope.countries = [];
        $scope.showme = false;

        $scope.CountryDetailsClick = function() {
            var responsePromise = Factory
             .getResponse("http://localhost:12345/DemoNew/getCountryList");

            responsePromise.success(function(data, status, headers,
                    config) {
                $scope.countries = data;
                console.log("countryList size = " + $scope.countries.length);
                $scope.showme = true;
            });

            responsePromise.error(function(data, status, headers,
                    config) {
                alert("AJAX failed");
            });
        }
}]);

MyFactory.js

var myFactory = angular.module('MyFactory', []);
myFactory.factory('Factory', function($http) {
return {
    getResponse : function(url) {
        return $http.get(url);
    }
}
});

View1.jsp

<body ng-view>
    <h1 class="page-header">View1</h1>
    {{countries.length}}
</body>

View2.jsp

<body ng-view>
    <h1 class="page-header">View2</h1>
    {{showme}}
</body>

homeView.jsp

<body ng-view>
<h1 class="page-header">Home</h1>

的index.jsp

<body ng-app="MyApp" ng-controller="MyController">
    <nav class="navbar navbar-default navbar-static-top" role="navigation"
        style="margin-bottom: 0">
            <a href="#/view2" ng-click="CountryDetailsClick()">Country Details</a>
            <a href="#/view1"> Country Rate Plans</a>
    </nav>

    <div id="page-wrapper"  ng-view>
    </div>
</body>

现在我开始使用控制台： -

countryList size = 268

这是正确的，我使用spring作为后端。我能够从数据库中获取数据。

但是在View1中我得到了：

0

同样在View2中我得到：

假

这意味着我无法将获取的数据反映到视图中。请帮忙:(

=============================================== ================

根据rob给出的建议，我改变了以下内容：

我将MyFactory.js改为：

var myFactory = angular.module('MyFactory', []);
myFactory.factory('Factory', function($http) {

var current = {};

var factory = {
    getResponse: function(urlReq){
        var data = $http({method: 'GET', url: urlReq}).then(function (result){
            current = result.data;
        }, function (result){
            alert("ERROR: No data returned");
        });
    },
    getList: function(){
        return current;
    }
}
return factory;
});

和MyControllers.js：

var controllers = angular.module('MyControllers', []);

controllers.controller('MyController', 
    function($scope, Factory) {
       $scope.CountryDetailsClick = function() {
       Factory.getResponse("http://localhost:12345/DemoNew/getCountryList");
       }

    });

    controllers.controller('MyController3',  
         function($scope, Factory) {
         console.log("in controller3");
    });

    controllers.controller('MyController2',  
        function($scope, Factory) {
        console.log("in controller2");
        $scope.countries = Factory.getList();
        $scope.showme = true;
    });

MyApp.js

app.config(['$routeProvider', function($routeProvider) {
    $routeProvider
        .when('/home', {
            controller: 'MyController',
            templateUrl: 'resources/modules/homeView/homeView.jsp'
        })
        .when('/view1', {
            controller: 'MyController3',
            templateUrl: 'resources/modules/view1/view1.jsp'
        })
        .when('/view2', {
            controller: 'MyController2',
            templateUrl: 'resources/modules/view2/view2.jsp'
        })
        .otherwise({redirectTo: '/home'});
}]);

View2.jsp

<body ng-view>
    <h1 class="page-header">View2</h1>
    {{showme}}
    {{countries}}
</body>

当我点击国家/地区详细信息时，我得到了＃34; true＆＃34;和一个空数组，但是当我点击国家/地区费率计划后单击国家/地区详细信息时，它完全正常。

请找出缺陷。!!

Answer 1

您正在使用index.jsp中的相同控制器和您的视图。因此Angular创建了两个控制器实例，每个实例都有自己的范围。您正在index.jsp范围内的CountryDetailsClick()调用ng-controller，但您试图从视图的范围中显示countries.length的值。

如果您想在不同控制器之间共享某些功能或状态（例如您的CountryDetailsClick()功能），请将其置于服务中。

使用工厂从控制器调用ajax后无法修改视图

1 个答案: