angularjs factory returned undefined

我在学习AngularJS的基础知识，我无法弄清楚为什么这个Factory返回一个未定义的值。这是我第一次尝试创建和了解工厂。我在网上和互联网上看到了很多例子，但我找不到解决方案。angularjs factory returned undefined

我想在工厂和每个不同的视图中显示的按钮上创建一个字符串（颜色）的数组，以将一个字符串添加到数组。但工厂返回未定义，所以我不能将值注入控制器。

这是代码。

的index.html

<head> 
</head> 

<body> 
    <a href="#/">Home</a> 
    <a href="#/seccion1">Seccion 1 </a> 
    <div ng-view> 

    </div> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"></script> 

    <script src="mijs.js"></script> 

</body>

JS文件（mijs.js）与控制器，工厂和$ routeProvider服务

var app=angular.module("myMod",['ngRoute']); 

app.config(
    function($routeProvider) 
    { 
     $routeProvider.when('/', 
      { 
       controller:'ctrlHome', 
       controllerAs:'home', 
       templateUrl:'home.html' 
      } 
     ); 

     $routeProvider.when('/seccion1', 
      { 
       controller:'ctrlSeccion1', 
       controllerAs:'seccion1', 
       templateUrl:'seccion1.html' 
      } 
     ); 
    }//end function($routeProvider) 
);//end config 

app.factory("factColors",function(){ 
    var arrayColors=['red','green','blue']; 
    return arrayColors; 
}); //end factory 

app.controller('ctrlHome',function(factColors) 
    { 
     var home=this; 
     home.arrayColors=factColors.arrayColors; 
    } 

);//end home controller 

app.controller('ctrlSeccion1',function(factColors) 
    { 
     var seccion1=this; 
     seccion1.arrayColors=factColors.arrayColors; 
    } 
);//end seccion1 controller

这里是视图home.html的

<p>home view </p> 
<p ng-repeat="color in home.arrayColors">{{color}}</p> 

<button ng-click="home.arrayColors.push('orange')">add color</button>

而且视图seccion1.html

<p>seccion 1 view </p> 
<p ng-repeat="color in seccion1.arrayColors">{{color}}</p> 

<button ng-click="seccion1.arrayColors.push('purple')">add color</button>

来源

2017-09-26 FranP

你的工厂直接返回数组。这本身就没有问题，但是您正在访问它，就好像它正在返回具有arrayColors属性的对象。所以，无论是工厂改变这一点：

app.factory("factColors",function(){ 
    return { 
     arrayColors: ['red','green','blue'] 
    }; 
});

或更改你与它进行交互，以这种方式：

app.controller('ctrlSeccion1',function(factColors) { 
    var seccion1=this; 

    seccion1.arrayColors=factColors; 
}

来源

2017-09-26 21:30:14

它的作品！但是，尽管我试图理解它，但我不知道为什么会发生这种情况。我的意思是，为什么当我引用在控制器中声明的某些东西时，我必须将“vm.Variable”（或范围中的别名）放在工厂中，而且这种方式在工厂中的工作方式不一样？ – FranP

工厂可以生产您想要的任何类型的东西。如果你想产生一个具有属性的对象，那么你可以（就像在我的第一个代码块中那样）。事实上，这可能是使用工厂最常用的方式，因为它可以让工厂有多种东西，每种都有自己的名字。因此，如果它是一个对象，就会像对待'vm.Variable'一样将它作为对象进行交互。 –

另一方面，你的代码有工厂生产数组，而不是一个对象。由于它是一个数组，它没有.arrayColors属性;它只有0,1,2等指数。这在工厂里是合法的，但它有点不常见。如果你想这样做，那么你需要以数组的方式与它交互。 –

angularjs factory returned undefined

回答

相关问题