Question

我想通过链接调用html页面。单击选项卡时，URL会发生变化，但页面无法加载。

这是我的html页面，点击一个标签我想在这里加载另一个页面：

<div id="ruleEditorContainer" class="ui-layout-container"
    ng-controller="ruleEditorController" style="height: 95%; width: auto;overflow:hidden;">
    <div class="ui-layout-center" style="overflow: hidden;border:1px solid red">
        <!-- <div style="border-bottom: 1px solid black"> -->
        <div class="btn-group" style="float: left;">
                    <button type="button" class="btn btn-primary" data-toggle="dropdown"> File </button>
                    <button type="button" class="btn btn-primary" data-toggle="dropdown">
                        Edit <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" style="left: -20; right: auto"
                        role="menu">
                        <li class="dropdown-submenu">
                <a href="#" style=" padding-left: 80px; padding-right: 50px;width:auto">New</a>
                <ul class="dropdown-menu">
                  <li><a tabindex="-1" href="#" ui-sref=".businessDomain" ng-click="addbusinessDomain()">Business Domain</a></li>
                  <li class="divider"></li>
                <li><a tabindex="-1" href="#">Business Sub Domain</a></li>
                    </ul>
                </div>

在这个js类中，我做了url mapping：

.state('DomainTree.businessDomain', {
        url: "/businessDomain",
        templateUrl: "rules/businessDomain.html"

    })

在这个js类中我定义了函数：

  $scope.addbusinessDomain = function() {
        //$scope.search.ruleType = ruleType;
        //$scope.ruleModel.ruleType=ruleType;
        $state.go('DomainTree.businessDomain');
    }

这是我的businessDomain.html页面：

<form  name="businessdomain" class="form-horizontal" role="form" ng-controller="ruleEditorController">
 <div class="panel panel-default" style="margin-bottom:0px">
 <div class="panel-heading">
            <h3 class="panel-title"><span class="fa fa-pencil"></span> Create Business Domain   <span ng-show="currentStatement.name">- {{currentStatement.name}}</span></h3>
        </div>
    <label for="name" class="col-sm-3 control-label">Name</label>
    <div class="col-sm-9">
      <input type="text" class="form-control rq-nrq-control" id="name" placeholder="Name" ng-model="ruleModel.name" ng-change="nameChanged()"  required="true">
    </div>
  </div>

  <div class="form-group">
    <label for="name" class="col-sm-3 control-label">Description</label>
    <div class="col-sm-9">
      <textarea class="form-control rq-nrq-control" id="description" placeholder="Description" ng-model="ruleModel.description" rows="3"></textarea>
    </div>
  </div>

  <div class="form-group well narrow">
    <div class="col-sm-offset-4 col-sm-8">
    <swt-tree tree-data="ruleModel.name" on-select="statementSelected(branch, selected_branches)" tree-control="statementTree" label-provider="rulesLabelProvider" content-provider="rulesContentProvider" expand-level="-1"></swt-tree>

  <button type="submit" class="btn btn-warning okCancelButton"  ng-click="addTree(businessdomain.$valid)" style="color: white: ;" >OK</button>
      <button type="submit" class="btn btn-default okCancelButton"  ng-click="cancel()" ui-sref="rulesSearch" formnovalidate="true">Cancel</button>
    </div>
  </div>
</form>

当我点击商家域名标签时，我的网址会发生如下变化： http://localhost:8181/app/index.html/DomainTree/businessDomain

但是我的页面businessDomain页面没有加载。

任何人都可以帮我解决这个问题。提前致谢

Answer 1

当您点击标签时，您将进入子视图。但是没有地方可以在当前视图中呈现它。您可以在视图中添加<ui-view>元素，也可以指定要替换的<ui-view>。您可以查看here以获取更多信息。

以下是每个人以不同方式呈现root状态的示例。请注意某些路由定义parent属性的方式，而其他路由指定@root值（指的是根状态的ui视图）。

  $stateProvider
    .state('root', {
      abstract: true,
      templateUrl: 'app/layout/content.html'
    })
    .state('home', {
      parent: 'root',
      url: '/',
      templateUrl: 'app/home/home.html'
    })
    .state('surveys', {
      parent: 'root',
      url: '/survey/new',
      templateUrl: 'app/surveys/index.html',
      controller: 'NewCtrl as ctrl'
    })
    .state('surveys.select', {
      parent: 'root',
      url: '/survey/new/:memberId/:visitType',
          templateUrl: 'app/surveys/select.html',
          controller: 'NewSurveySelect as ctrl'
    })
    .state('surveys.select.settings', {
      url: '/:surveys',
      views: {
        '@root': {
          templateUrl: 'app/surveys/settings.html',
          controller: 'SurveySettingsCtrl as ctrl'
        }
      }
    })
    .state('surveys.select.question', {
      url: '/:surveys/:surveyId/:questionIndex/:language/:audio',
      views: {
        '@root': {
          templateUrl: 'app/show_surveys/index.html',
          controller: 'ShowSurveysCtrl as ctrl'
        }
      }
    });

我的页面没有使用angularjs ui-sref加载，尽管它的url正在改变

1 个答案: