Question

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

我正在尝试在工厂中创建一个字符串（颜色）数组，并在每个不同视图中显示一个按钮，以向该数组添加一个字符串。但是工厂返回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>

带控制器，工厂和$ routeProvider服务的

JS文件（ mijs.js）

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工厂返回undefined

1 个答案: