个人中心
gpt4 book ai didi

javascript - Angularjs 表单问题。表格不可见

转载 作者：太空宇宙 更新时间：2023-11-04 12:30:30 25 4
gpt4 key购买 nike

您好，我为我的应用程序创建了一个嵌套 View 表单。

效果很好...但是我决定向表单添加更多页面以扩展其功能(6 个表单页面存储在 partials/formname.html 等中。

表单不会出现。这只是一个空白区域。只有标题/导航栏有效。

我觉得问题在于 script.js。控制台似乎没有抛出任何错误。我花了一整天的时间试图弄清楚为什么它不会运行，我真的需要一些帮助。谢谢

这是我的傻瓜:enter link description here

这是index.html

<!DOCTYPE html>
<html ng-app="financeApp">

<head>
 <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet"  href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
  <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
 <script data-require="ui-router@0.2.10" data-semver="0.2.10" src="https://rawgit.com/angular-ui/ui-router/0.2.10/release/angular-ui-router.js"></script>
 <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
 <link rel="stylesheet" href="style.css" />
 <script src="script.js"></script>
</head>

<body ng-controller = "demoCtrl">

  <ul class="nav nav-pills pull-right">
   <li ng-class="{active: isState('home') }">
     <a ui-sref="home">Home</a>
   </li>
  <li ng-class="{active: isState('form') }">
    <a ui-sref="form">Form</a>
  </li>
  <li ng-class="{active: isState('contact') }">
    <a ui-sref="contact">Contact</a>
  </li>
 </ul>
 <h3 class="text-muted">Demo Page</h3>
 <br>
 <div ui-view=""></div>


 </body>

 </html>

和 script.js

var financeApp = angular.module('financeApp', [
  'ui.router' ])
  .config(['$urlRouterProvider', '$stateProvider',
    function($urlRouterProvider, $stateProvider) {
      $urlRouterProvider.otherwise('/home');
      $stateProvider
        .state('home', {
          url: '/',
          templateUrl: 'partials/home.html',
          controller: 'homeCtrl'
        })
        .state('form', {
          url: '/form',
          templateUrl: 'partials/form.html',
          controller: 'formCtrl'
        })






 //note the following are form's child states
          .state('form.goal', {
            url: '/goal',
            templateUrl: 'partials/formGoal.html',
            controller: 'formGoalCtrl'
          })
          .state('form.goalamount', {
            url: '/goalamount',
            templateUrl: 'partials/formGoalamount.html',
            controller: 'formGoalamountCtrl'
          })
          .state('form.risk', {
            url: '/risk',
            templateUrl: 'partials/formRisk.html',
            controller: 'formRiskCtrl'
          })

          .state('form.invest', {
            url: '/invest',
            templateUrl: 'partials/formInvest.html',
            controller: 'formInvestCtrl'
          })
          .state('form.fund', {
            url: '/fund',
            templateUrl: 'partials/formFund.html',
            controller: 'formFundCtrl'
          })
          .state('form.account', {
            url: '/account',
            templateUrl: 'partials/formAccount.html',
            controller: 'formAccountCtrl'
          })

        //contact state
        .state('contact', {
          url: '/contact',
          templateUrl: 'partials/contact.html',
          controller: 'contactCtrl'
        });
    }
  ])


financeApp.controller('demoCtrl', ['$scope', '$state', '$location',
  function($scope, $state, $location) {
    $scope.isState = function(states) {
      return $state.includes(states);
    };
  }
])
 .controller('homeCtrl', ['$scope',
'$state',
  function($scope, $state) {} ]) .controller('formCtrl', ['$scope',
'$state',
  function($scope, $state) {




 //This is to go to one of the child state of formCtrl. Here I choose
//it to go to profile state first.
    //optionally you can use parent property or "abstract = true".
    //or you can use $urlRedirect service.
    $state.go('.profile');
  }
]) .controller('formGoalCtrl', ['$scope', '$state',
  function($scope, $state) {
    //just a simple function to go to the next state using $state.go()
    $scope.goToNextState = function(nextState){
      $state.go(nextState);
    }
  }
]) .controller('formGoalamountCtrl', ['$scope', '$state',
  function($scope, $state) {
    $scope.goToNextState = function(nextState){
      $state.go(nextState);
    }
  }



]) .controller('formRiskCtrl', ['$scope', '$state',
  function($scope, $state) {
    $scope.goToNextState = function(nextState){
      $state.go(nextState);
    }
  }



]) .controller('formInvestCtrl', ['$scope', '$state',
  function($scope, $state) {
    $scope.goToNextState = function(nextState){
      $state.go(nextState);
    }
  }



]) .controller('formFundCtrl', ['$scope', '$state',
  function($scope, $state) {
    $scope.goToNextState = function(nextState){
      $state.go(nextState);
    }
   }
    ]) .controller('formAccountCtrl', ['$scope', '$state',
    function($scope, $state) {
    $scope.finished = function(){
      alert('Form Completed!')
     }
    }
   ]) .controller('contactCtrl', ['$scope', '$state',
   function($scope, $state) {
     $scope.contact_str = "This is a string from contactctrl";
   }

    ]);

最佳答案

您的状态未解析的原因是您的模板 url 路径在您尝试引用的文件中不正确。 templateUrl 的每个值都必须是包含部分文件的实际路径。在您的示例中，您的 View 所在的目录下没有名为 partials/ 的目录。它们与您的其余文件位于同一目录中。

如果您从 templateUrl 中删除 'partials/'，则状态将解析。

在查看您的代码后的一些其他建议和想法:

  • 在您的顶级表单 Controller 中，您正在重定向到一个名为 .profile 的子状态，该状态不存在，因此会引发错误。

  • 在 $state.go() 中使用相对状态可能会在用户使用前进或后退按钮操作状态时导致问题。使用完整的状态名称(例如 'form.goal' 而不是 '.goal' 将防止出现这种情况。

  • 您正在通过尝试路由到 '/home' 为 home 状态设置重定向；但是，为了默认为 home 状态，您必须传入 home 状态的 url，即 '/'。请查看我对您的 plunk 所做的更改，以获取下面的工作示例。

  • 最后，作为一个建议，ui.router 包含一个名为 uiSrefActive 的指令，您可以将其与 uiSref 结合使用在导航元素上设置事件类。更多信息请点击此处:https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref-active

更新的插件: http://plnkr.co/edit/L9eCNpwpNHzZmKuY2V4J?p=preview

关于javascript - Angularjs 表单问题。表格不可见，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27695538/

25 4 0
文章推荐： javascript - 五个圆圈对齐，当我点击圆圈时，我希望数字 5 出现在圆圈内
文章推荐： c++ - 链接 : fatal error LNK1181: cannot open input file 'opencv_world341d.lib'
文章推荐： c++ - 使用 boost 查找目录空间详细信息
文章推荐： java - Android 按钮的动画效果不符合预期
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com