如果已将工厂区域注入另一个工厂

时间:2017-07-30 21:53:00

标签: javascript angularjs

这是一个证明我的意思的JSFiddle:http://jsfiddle.net/9n8kdxaz/15/

//html
<body ng-app="myApp">
    <h3>
        Select a website
    </h3>

    <div ng-controller="TestCtrl">
        <select ng-model="selectedOption" ng-options="option.name for option in apiOptions" ng-change="changeServer(selectedOption)"></select>

        <button type='button' ng-click="submit()">
            Submit
        </button>
        <br>

        <pre ng-show="ready">
            {{data}}
        </pre>
    </div>


</body>


//javascript
angular
    .module('myApp', ['ngResource']);

angular
    .module('myApp')
    .controller('TestCtrl', function($scope, Config, GetData) {
        $scope.ready = false;
        $scope.apiOptions = [{
            name: "Google",
            baseUrl: "http://google.com"
        }, {
            name: "Amazon",
            baseUrl: "http://amazon.com"
        }, {
            name: "Youtube",
            baseUrl: "http://youtube.com"
        }];

        $scope.changeServer = function(option) {
            Config.setBaseUrl(option.baseUrl);
        }
        $scope.selectedOption = $scope.apiOptions[0];

        if (Config.baseUrl.length <= 1) {
            $scope.changeServer($scope.selectedOption);
        }

        $scope.submit = function() {
            console.log(Config.baseUrl);
            var d = GetData.get();
            d.$promise.then(function(result) {
                $scope.data = result;
                $scope.ready = true;
            })
        }
    })

.factory('Config', function() {
    var config = {};
    config.baseUrl = '';

    config.setBaseUrl = function(url) {
        config.baseUrl = url;
    }

    return config;
})

.factory('GetData', function($resource, Config) {
    return $resource(Config.baseUrl + '/dkajskldas');
})

请注意,在submit()函数中,我可以打印Config.baseUrl并按预期打印。但GetData工厂没有这个最新版本的Config;在GetData中,Config.baseUrl只是空的初始化字符串。

我猜测正在发生的事情是,当Config注入GetData时,它是一个新的独立的Config副本。我的印象是,工厂是单身人士,但一切都会分享相同的数据吗?

我也尝试将Config更改为这样的服务:http://jsfiddle.net/qoygby89/ 但仍然是同样的问题。

基本的想法是让Config工厂作为一种在我所有的各种视图/控制器/ $资源工厂之间共享URL的方法。我可以用$ rootScope而不是Config工厂做到这一点,但我试图尽可能避免这种情况。还有其他想法吗?

2 个答案:

答案 0 :(得分:1)

您遇到的问题是因为工厂是单身人士。将GetData注入控制器时,GetData已被定义为指向&#39;&#39;&#39; +&#39; / dkajskldas&#39;因为在工厂运行时没有为您的Config.baseUrl属性分配任何内容。

一个可能的解决方案是让GetData成为一个函数,它根据Config.baseUrl的当前值返回一个全新的资源

.factory('GetData', function($resource, Config) {
    return function() { return $resource(Config.baseUrl + '/dkajskldas'); }
})

然后在控制器中使用它

var d = GetData().get();

虽然可能是更优雅的解决方案。

编辑:我可能会重命名&#34; GetData&#34;到&#34; GetDataResource&#34;为了清楚起见或者可能考虑创建一个服务,公开动态创建所需资源的方法。

答案 1 :(得分:0)

工厂是单身,所以你只是在初始化时定义网址。试试这个:

if