1

私は自分のアプリケーションに「bionico」と呼ばれるメイン アプリを持っています。このアプリは UI ルーターを利用しています。独自の $stateProvider 構成があります。そしてそれは大丈夫です、それは動作します

しかし、新しいモジュールを作成する必要がありました (アプリケーションにステップバイステップのフォームを挿入しようとしているため、コードはこちらにあります: https://scotch.io/tutorials/angularjs-multi-step- form-using-ui-router )

このステップバイステップのフォームを作成するには、独自の $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.formApp」ではなく、「bionico」$stateProvider 構成を使用しているためだと思います。

ここに私のHTMLコードがあります:

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

             {{test}}

formCtrl の {{test}} は正常に動作し、画面に変数を出力していますが、私が言ったように ui-view はそうではありません。メインモジュールの構成ではなく、「bionico.formApp」構成を使用したいことを角度に伝える方法はありますか? これをどのように解決しますか？

その瞬間から「bionico.formApp」を使用したいが、その方法がわかりません。試してみまし <div ng-app="bionico.formApp">たが、何も起こりませんでした。エラーもありませんでした

その後、スタックオーバーフローで手動でブートストラップする必要があることを確認しましたが、「bionico.formApp」が既にブートストラップされているというエラーが表示されました

アップデート

人々は、1 つのモジュールだけでルーティングする必要があると提案しましたが、メイン アプリケーションとフォーム用に 1 つずつ、2 つの異なるデフォルト ルーティングが必要でしたが、それはうまくいきませんでした。そして、私がこれを機能させようとした理由は、アプリケーションに次のようなステップバイステップのフォーム (ウィザード) が必要だったからです: https://scotch.io/tutorials/angularjs-multi-step-form-using- ui ルーター)

しかし、私は面倒な価値がないと判断しました.Angular jsの別のウィザードを見つけようとします.

私は今、このウォークスルー ウィザードを使用しています: https://github.com/mgonto/angular-wizard

インストールは簡単で、テンプレートのカスタマイズも非常に簡単で、お勧めです!

4

0 に答える 0