angularjs 工厂返回未定义

Question

我正在学习 AngularJS 的基础知识，我不明白为什么这个工厂 returns 是一个未定义的值。这是我第一次尝试创建和理解工厂。我在 SO 和互联网上看到了很多例子，但我找不到解决方案。

我正在尝试在工厂中创建一个字符串（颜色）数组，并在每个不同的视图中显示一个按钮，以将一个字符串添加到数组中。但是工厂 returns 未定义，所以我无法将值注入控制器。

这是代码。

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>

Answer 1

你的工厂正在直接返回数组。这本身就很好，但是您访问它就像它返回一个带有 arrayColors 属性的对象一样。所以要么将工厂更改为：

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

或者将您与之互动的方式更改为：

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

    seccion1.arrayColors=factColors;
}

angularjs 工厂返回未定义

angularjs factory returning undefined

javascript

factory

undefined

angularjs