Angular factory funktioniert beim Laden der Seite, nicht beim Aufruf einer Funktion

Question

Der folgende Code, insbesondere der PlanetFactory-Teil, funktioniert, wenn die Seite zum ersten Mal geladen wird. Das bedeutet, dass ein neues Planet-Objekt mit 7 Standardringen erstellt wird. Wenn jedoch eine Funktion aufgerufen wird, um ein neues Planet-Objekt $scope.planet zuzuordnen, passiert nichts. Wenn Sie im Beispielcode einen Namen oder Durchmesser hinzufügen und dann auf "Neuen Planeten erstellen" klicken, wird die planetFactory nicht aufgerufen.

Was vermisse ich hier an Fabriken?

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

den richtigen Weg gefunden Fabriken für diesen speziellen Zweck zu verwenden in this excellent guide from Todd Motto:

Der Unterschied zwischen dem, was ich vorher gemacht habe und seine Methode ist, dass das new Schlüsselwort nicht verwendet wird, Innerhalb des Werkcodes gibt die Fabrik den gesamten Konstruktor zurück, und dann ruft man den Code new planetFactory vom tatsächlichen Controller auf.

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>