javascript - Angular 会将我的对象推出范围，或者将对象与我的提供者合并

Question

不太确定如何表达我的问题，但我关心的是一个我称为 xyzApi 的对象。我在我的 Angular 代码之外定义了这个对象，它包含一些类和实用方法等，我希望它们可供我的 api 的其余部分使用。

看起来像这样(简短版本):

var xyzApi = xyzApi || {
    entities : new function () {
        this.oAuthToken = function (token, expires, type) {
            this.token = token;
            this.expires = expires;
            this.type = type;
            this.toString = function () {
                if (this.token != null)
                    return this.type + ' ' + this.token;
                return null;
            };
        };
    }
};

现在，我的 Angular 服务层创建了一个也称为 xyzApi 的提供程序。它看起来像这样:

(function () {
    angular.module('xyzDataWebServices').provider('xyzApi', function () {
        var baseUrl;
        this.setBaseUrl = function (value) {
            baseUrl = value;
        };
        this.$get = ['$log', 'baseRequest', 'xyzApiContext', 'xyzApiAuthentication', 'xyzApiLibrary', function xyzApiFactory($log, baseRequest, xyzApiContext, xyzApiAuthenication, xyzApiLibrary) {
            baseRequest.setServiceUrl(baseUrl);
            var factory = {
                context: xyzApiContext,
                authentication: xyzApiAuthenication,
                library: xyzApiLibrary
            }
            return factory;
        }];
    });
})();

现在，当代码使用提供程序时，我希望将我的原始对象合并到提供程序中，就好像它是其中的一部分一样。

这会自动发生，还是在使用提供程序的 Controller 范围内会导致原始对象不可见？

Answer 1

如果我理解正确，您可以将您的 factory 和 xyzApi 合并到您的提供程序中。

我认为这不会自动发生。但是，如果您在提供程序中添加 angular.merge(factory, xyzApi); ，它应该按照您想要的方式工作。

angular.merge() 适用于 Angular 1.4 或更高版本。 angular.extend() 可能也可以工作，但深度合并不会发生。

请查看下面或此 jsfiddle 中的演示.

它只是显示这两个对象的合并。

var xyzApi = xyzApi || {
	sayHello: function() {
  	return "hey there\n";
  }
};

angular.module('demoApp', [])
	.controller('MainController', MainController)
  .provider('xyzApi', function XyzApiProvider() {
  
  this.$get = function() {
  
  	var xyzApiFactory = {
      otherFunction: function() {
        //$log.log('other function called');
        return 'other function \n';
      }
  	};
    //console.log(xyzApiFactory, xyzApi);
    angular.merge(xyzApiFactory, xyzApi);
    return xyzApiFactory;
  };
});


function MainController(xyzApi) {
	var vm = this;
  vm.test = '';
  
	vm.sayHello = function() {
  	vm.test += xyzApi.sayHello() + xyzApi.otherFunction();
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular.js"></script>
<div ng-app="demoApp" ng-controller="MainController as mainCtrl">
<pre>{{mainCtrl.test}}</pre>
  <button ng-click="mainCtrl.sayHello()">
  say hello!!
  </button>
</div>