從jSon數據設置動態$ stateProvider狀態

Question

我必須在角度上構建一堆多步驟形式，並試圖簡化過程。我想要做的是每個步驟（狀態）通過json數據動態生成。每一步都有一個非常基本的佈局，只是一個輸入字段。正因爲如此，我最好能夠動態創建模板。

這是我儘可能的實際工作簡單的形式：

angular.module('formApp', ['ui.router']) 
.config(function($stateProvider, $urlRouterProvider) { 
    $stateProvider 
     .state('form', { 
      url: '/form', 
      template: '<div>{{formData}}</div><ui-view></ui-view>', 
      controller: 'formCtrl' 
     }) 
     .state('form.name', { 
      url: '/name', 
      template: '<h3>{{title}}</h3><input type="text" ng-model="formData.name"><a ui-sref="form.phone">next</a>', 
      controller: 'nameCtrl' 
     }) 
     .state('form.phone', { 
      url: '/phone', 
      template: '<h3>{{title}}</h3><input type="text" ng-model="formData.phone"><a ui-sref="form.zip">next</a>', 
      controller: 'phoneCtrl' 
     }) 
     .state('form.zip', { 
      url: '/zip', 
      template: '<h3>{{title}}</h3><input type="text" ng-model="formData.zip">', 
      controller: 'zipCtrl' 
     }); 

    $urlRouterProvider.otherwise('/form/name'); 
}) 
.controller('formCtrl', function($scope){ 
    $scope.formData = {}; 
}) 
.controller('nameCtrl', function($scope){ 
    $scope.title = 'Please Enter your Name'; 
}) 
.controller('phoneCtrl', function($scope){ 
    $scope.title = 'Please Enter your Phone Number'; 
}) 
.controller('zipCtrl', function($scope, $http){ 
    $scope.title = 'Please Enter your ZipCode'; 
}); 

而且我有這個循環讀取JSON數據，它的工作原理，準確console.logs我需要什麼

$http.get('data.json').then(function(res){ 
    var pages = res.data.pages; 
    for(page of pages){ 
     var title  = page.title; 
     var alias  = page.alias; 
     var sref  = page.sref; 

     var dynamicString = '.state("form.' + alias + '", {' + 
           'url: ' + alias + ',' + 
           'template: ' + 
            '<h3>' + title + '</h3>' + 
            '<input type="text" ng-model="formData.' + alias + '">' + 
            '<a ui-sref="' + sref + '">next</a>",' + 
           'controller: ' + alias + 
          '})' + dynamicString; 
    } 
}); 

最後，這裏是我的JSON

{ "pages": 
    [ 

     { 
      "title": "Whats Your Name?", 
      "alias": "name", 
      "sref": "phone" 
     }, 

     { 
      "title": "Whats Your Phone Number?", 
      "alias": "name", 
      "sref": "zip" 
     }, 

     { 
      "title": "Whats Your Zip Code?", 
      "alias": "zip", 
      "sref": "redirect" 
     } 
    ] 
} 

但現在我不知道如何在它前往羅繼續廣告到$ stateprovider中。這甚至有可能嗎？ 謝謝！

Answer 1

我不喜歡這種做法，因爲它做的事情不清楚，醜陋的，但如果你希望走這條路，工作示例是在這裏：

var json_form = { 
 
\t "title": "Form title", 
 
    "alias": "form" , 
 
    "defaultPage": "name", 
 
\t "pages" : [ 
 
    { 
 
     "title": "Whats Your Name?", 
 
     "alias": "name", 
 
     "sref": "phone" 
 
    }, 
 

 
    { 
 
     "title": "Whats Your Phone Number?", 
 
     "alias": "phone", 
 
     "sref": "zip" 
 
    }, 
 

 
    { 
 
     "title": "Whats Your Zip Code?", 
 
     "alias": "zip", 
 
     "sref": "redirect" 
 
    } 
 
\t ] 
 
} 
 
document.getElementById('app').setAttribute("ng-app", json_form.alias + "App"); 
 
angular.module(json_form.alias + 'App', ['ui.router']) 
 
.config(function($stateProvider, $urlRouterProvider) { 
 
    $stateProvider.state(json_form.alias, { 
 
    url: '/' + json_form.alias, 
 
    template: '<h1>' + json_form.title + '</h1><div ui-view></div>', 
 
    controller: json_form.alias + 'Ctrl' 
 
    }); 
 
\t json_form.pages.forEach(function(page, index) { 
 
\t \t $stateProvider.state(json_form.alias + '.' + page.alias, { 
 
\t \t \t url: '/' + page.alias, 
 
\t \t \t template: '<h3>' + page.title + '</h3><input type="text" ng-model="' + json_form.alias + 'Data.' + 
 
\t \t \t page.alias + '"><a ui-sref="' + json_form.alias + '.' + page.sref + '">next</a>', 
 
\t \t \t controller: json_form.alias + 'Ctrl' 
 
\t \t }); 
 
\t }); 
 
    $urlRouterProvider.otherwise('/' + json_form.alias + '/' + json_form.defaultPage); 
 
}) 
 
.controller(json_form.alias + 'Ctrl', function($scope, $location){ 
 
    $scope[json_form.alias + 'Data'] = $scope[json_form.alias + 'Data']||{}; 
 
});

<div id="app"><div ui-view></div></div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.js"></script>