javascript - 使用多个 View 时解析每个 Controller 的值

标签 javascript html angularjs angular-ui-router

我正在使用angular-ui-router ，并且我有多个 ui-view div，如下所示:

<!DOCTYPE html>
<html ng-app="myApp">
    <!-- loading libraries here etc -->      
    <div ui-view="viewA"></div>    
</html>

每个 View 都有自己的 Controller ，我需要解决传递到这些 Controller 中的依赖关系。我尝试了以下方法，但很困惑为什么它不起作用:

var myApp = angular.module('myApp', ['ui.router']);

myApp.config(function($stateProvider) {
  $stateProvider
    .state('index', {
      url: "",
      views: {
        "viewA": { 
            template: "{{test}}", 
            resolve: { 
                test: function(){ 
                    return {
                        value: 'Hello World!'
                    };
                } 
            }, 
            controller: testController 
        },
      }
    });
});

myApp.controller('testController', function($scope, test){
  $scope.test = test.value;
});

I have created a plunker here.

我在调用 config 之前还是之后声明 Controller 并不重要。将 Controller 内联确实可行，但是随着时间的推移，这会变得笨拙且难以维护，我想将其存储在它自己的文件中。

我的印象是 Angular 足够智能，可以在引导应用程序时等待依赖项加载，难道不是这样吗？这是将我的 Controller 内联的唯一方法吗？

谢谢

最佳答案

.config 选项应该这样写: