1

我的应用程序上有一个主应用程序，称为“bionico”，该应用程序利用 UI-router 它有自己的 $stateProvider 配置！没关系，它有效

但是我需要创建一个新模块（因为我正在尝试在我的应用程序中插入一个分步表单，您可以在此处找到代码：https ://scotch.io/tutorials/angularjs-multi-step-表单使用用户界面路由器）

要制作这个分步表单，我需要使用它自己的 $stateProvider 配置创建一个新模块，问题是它不起作用，我在我的主应用程序中包含了这个名为“bionico.formApp”的模块，就像这样：

angular.module('bionico', ['ui.router', other modules, 'bionico.formApp'])

这很好用，如果我尝试在“bionico.formApp”中使用控制器，它也可以正常工作。这是此模块的代码：

// create our angular app and inject ngAnimate and ui-router 
//         =============================================================================
angular.module('bionico.formApp', ['ngAnimate', 'ui.router', ])

// configuring our routes 
// =============================================================================
.config(function($stateProvider, $urlRouterProvider) {

$stateProvider

    .state('form', {
        url: '/form',
        templateUrl: 'templates/campaignForm/form.html',
        controller: 'formCtrl'
    })

     // nested states 
    // each of these sections will have their own view
    // url will be nested (/form/profile)
    .state('form.profile', {
        url: '/profile',
        templateUrl: 'templates/campaignForm/form-profile.html'
    })

    // url will be /form/interests
    .state('form.interests', {
        url: '/interests',
        templateUrl: 'templates/campaignForm/form-interests.html'
    })

    // url will be /form/payment
    .state('form.payment', {
        url: '/payment',
        templateUrl: 'templates/campaignForm/form-payment.html'
    })


// catch all route
// send users to the form page 
$urlRouterProvider.otherwise('/form/profile');
})

// our controller for the form
// =============================================================================
.controller('formCtrl', function($scope) {

// we will store all of our form data in this object
$scope.formData = {};
 $scope.test = "FUNCIONA";
// function to process the form
$scope.processForm = function() {
    alert('awesome!');  
};

 });

但是为了使这个表单工作我需要使用<div ui-view></div>，当我把它放在我的文件中时没有任何反应，我认为这是因为应用程序正在使用我的主模块“bionico”$stateProvider 配置而不是“bionico.formApp”

这是我的html代码：

        <div ng-controller="formCtrl">
                <!-- views will be injected here -->
             <div ui-view></div>

             {{test}}

formCtrl 中的 {{test}} 工作正常，它在我的屏幕上打印变量，但就像我说的 ui-view 不是。有没有办法告诉 Angular 我想使用“bionico.formApp”配置而不是我的主模块中的配置？你会如何解决这个问题？

就像我想我必须告诉 angular 从那一刻起我想使用“bionico.formApp”，但我不知道该怎么做。我试过 <div ng-app="bionico.formApp">但什么也没发生，甚至没有错误

然后我在堆栈溢出中看到我必须手动引导它，但后来我收到一条错误消息，说“bionico.formApp”已经被引导了

更新

人们建议我只需要在一个模块中路由东西，但我需要两个不同的默认路由，一个用于我的主应用程序，一个用于我的表单，但这不起作用。我之所以试图完成这项工作是因为我需要在我的应用程序上使用一个分步表单（向导），就像这样：https ://scotch.io/tutorials/angularjs-multi-step-form-using- ui路由器）

但我认为这不值得麻烦，我会尝试为 angular js 寻找另一个向导

我现在正在使用这个walktrough 向导： https ://github.com/mgonto/angular-wizard

很容易安装，而且很容易自定义模板，我推荐！

4

0 回答 0