角度工厂在页面加载时工作，而不是在被函数调用时工作

Question

以下代码，特别是planetFactory部件在页面初始加载时起作用。意思是，一个新的Planet对象用7个默认铃声创建。但是，如果调用一个函数将一个新的Planet对象分配给$scope.planet，则不会发生任何情况。在示例代码中，如果添加名称或直径，然后单击“创建新行星”，则不会调用pl​​anetFactory。

我在这里错过了什么工厂？

var app = angular.module('app', ['appControllers', 'appServices']); 
 

 
var appControllers = angular.module('appControllers', []) 
 
    .controller('main', ['$scope', 'planetFactory', function($scope, planetFactory) { 
 
    $scope.planet = planetFactory; 
 
    $scope.newPlanet = function() { 
 
     console.log('This part is actually executed but no factory call'); 
 
     $scope.planet = planetFactory; 
 
    } 
 
    }]); 
 

 
var appServices = angular.module('appServices', []) 
 
    .constant('defaultRings', 7) 
 
    .factory('planetFactory', ['defaultRings', function (defaultRings) { 
 
    console.log('Factory called, logging this message'); 
 
    function Planet (rings) { 
 
    this.name; 
 
    this.diameter; 
 
    this.rings = rings; 
 
    } 
 
    return new Planet(defaultRings); 
 
    }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<h3>Change the name or diameter so to confirm creating a new planet doesnt work</h3> 
 
<div ng-app="app" ng-controller="main"> 
 
Name <input type="text" ng-model="planet.name"> <br/> 
 
Diameter <input type="text" ng-model="planet.diameter"> <br/> 
 
<hr/> 
 
    Planet object: <br/> 
 
    Name: {{ planet.name }} <br/> 
 
    Diameter: {{ planet.diameter }} Km <br/> 
 
    Rings: {{ planet.rings }}<br/> 
 
    <input type="button" ng-click="newPlanet()" value="Create new planet"> 
 
    <br/><br/><br/> 
 
</div>

Answer 1

发现使用工厂的这一特定目的in this excellent guide from Todd Motto正确的方法：

之前我做什么，他的方法是，不使用new关键字的区别在工厂代码内部，工厂返回整个构造函数，然后从实际控制器调用new planetFactory代码。

var app = angular.module('app', ['appControllers', 'appServices']); 
 

 
var appControllers = angular.module('appControllers', []) 
 
    .controller('main', ['$scope', 'planetFactory', function($scope, planetFactory) { 
 
    $scope.planet = new planetFactory(8); 
 
    $scope.newPlanet = function() { 
 
     console.log('This part is actually executed but no factory call'); 
 
     $scope.planet = new planetFactory(3); 
 
    } 
 
    }]); 
 

 
var appServices = angular.module('appServices', []) 
 
    //.constant('defaultRings', 7) --> not needed 
 
    .factory('planetFactory', ['defaultRings', function(defaultRings) { 
 
    console.log('Factory called, logging this message'); 
 

 
    function Planet(rings) { 
 
     this.name; 
 
     this.diameter; 
 
     this.rings = rings; 
 
    } 
 
    return Planet; 
 
    }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<h3>Change the name or diameter so to confirm creating a new planet doesnt work</h3> 
 
<div ng-app="app" ng-controller="main"> 
 
    Name <input type="text" ng-model="planet.name"> <br/> Diameter <input type="text" ng-model="planet.diameter"> <br/> 
 
    <hr/> Planet object: <br/> Name: {{ planet.name }} <br/> Diameter: {{ planet.diameter }} Km <br/> Rings: {{ planet.rings }}<br/> 
 
    <input type="button" ng-click="newPlanet()" value="Create new planet"> 
 
    <br/><br/><br/> 
 
</div>