angularjs工厂返回未定义 [英] angularjs factory returning undefined
问题描述
我正在学习AngularJS的基础知识，我无法弄清楚为什么这个Factory返回一个未定义的值.这是我创建和了解工厂的第一次尝试.我在SO和互联网上看到了很多示例，但找不到解决方案.
I am learning the basics of AngularJS and I can´t figure out why this Factory returns an undefined value. It´ my first attempt to create and understand factories. I saw many examples on SO and on the internet but I couldn´ find the solution.
我正在尝试在工厂中创建一个字符串(颜色)数组，并在每个不同的视图中显示一个按钮，以将一个字符串添加到该数组中.但是工厂会返回未定义的值，因此我无法将值注入控制器.
I am trying to create an array of strings (colors) on the factory and a button shown in each different view to add one string to the array. But the factory returns undefined so I can´t inject the value to the controllers.
这是代码.
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服务
JS file (mijs.js) with controllers, the factory and the $routeProvider service
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>
推荐答案
您的工厂正在直接返回数组.就其本身而言，这很好，但是您正在访问它，就像它正在返回具有arrayColors属性的对象一样.因此，要么将工厂更改为此:
Your factory is returning the array directly. That's fine in and of itself, but you're accessing it as though it's returning an object with an arrayColors property. So either change the factory to this:
app.factory("factColors",function(){
return {
arrayColors: ['red','green','blue']
};
});
或将与之互动的方式更改为此:
Or change the way you interact with it to this:
app.controller('ctrlSeccion1',function(factColors) {
var seccion1=this;
seccion1.arrayColors=factColors;
}
这篇关于angularjs工厂返回未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
