Question

我在角度js中使用ui-router。

我有国家定义为

  $stateProvider.state('main', {
  url:'/',
  templateUrl:'views/main.html',
  controller:'MainCtrl'
}).state('practice', {
    url:'/practice',
    templateUrl:'views/practice/practice.html',
    controller:'PracticeCtrl
    }
  }
)..state('practice.exam', {
    url:'/{examName}',
    templateUrl:'views/practice/exam.html',
    controller:'ExamCtrl'
    }
  }
).state('practice.exam.service', {
      url:'/{serviceName}',
      templateUrl:'views/practice/service.html',
      controller:'ServiceCtrl',

    }
  )
  .state('practice.exam.service.competitiveSamplePaper', {
      url:'/{samplePaperNumber}',
      templateUrl:'views/practice/competitive_sample_paper.html',
      controller:'CompetitiveSamplePaperCtrl'
    }
  )
  .state('practice.exam.service.subject', {
    url:'/{subjectName}',
    templateUrl:'views/practice/subject.html',
    controller:'SubjectCtrl'
  }
)

当我点击ui-sref =＆＃34; practice.exam.service.subject（{subjectName：＆＃39; Physics＆＃39;}）＆＃34;

模板都是templateUrl:'views/practice/competitive_sample_paper.html' 和 templateUrl:'views/practice/subject.html'被加载。我想在我使用时只加载templateUrl:'views/practice/subject.html' ui-sref="practice.exam.service.subject({subjectName: 'Physics'})"。

请帮忙。

Answer 1

在您的网页中添加ui-view的名称在practice.html中：

<div ui-view="practice"></div>

视图/实践/ exam.html：

<div ui-view="practiceExam"></div>

视图/实践/ service.html：

<div ui-view="practiceExamService"></div>

并将您的ui-router更改为：

 $stateProvider.state('main', {
  url:'/',
  templateUrl:'views/main.html',
  controller:'MainCtrl'
}).state('practice', {
    url:'/practice',
    templateUrl:'views/practice/practice.html',
    controller:'PracticeCtrl
    }
  }
).state('practice.exam', {
    url:'/{examName}',
    view:{'practice':{ templateUrl:'views/practice/exam.html'}},
    controller:'ExamCtrl'
    }
  }
).state('practice.exam.service', {
      url:'/{serviceName}',
      view:{'practiceExam':{ templateUrl:'views/practice/service.html'}},
      templateUrl:'views/practice/service.html',
      controller:'ServiceCtrl',

    }
  )
  .state('practice.exam.service.competitiveSamplePaper', {
      url:'/{samplePaperNumber}',
      view:{'practiceExamService':{ templateUrl:'views/practice/competitive_sample_paper.html'}},
      templateUrl:'views/practice/competitive_sample_paper.html',
      controller:'CompetitiveSamplePaperCtrl'
    }
  )
  .state('practice.exam.service.subject', {
    url:'/{subjectName}',
 view:{'practiceExamService':{  templateUrl:'views/practice/subject.html'}},
       controller:'SubjectCtrl'
  }
)

Answer 2

像这样定义你的状态

$stateProvider.state('main', {
      url:'/',
      templateUrl:'views/main.html',
      controller:'MainCtrl'
    }).state('practice', {
        url:'/practice',
        templateUrl:'views/practice/practice.html',
        controller:'PracticeCtrl
        }
      }
)..state('practiceexam', {
    url:'/{examName}',
    templateUrl:'views/practice/exam.html',
    controller:'ExamCtrl'
    }
  }
).state('practiceexamservice', {
      url:'/{serviceName}',
      templateUrl:'views/practice/service.html',
      controller:'ServiceCtrl',

    }
  )
  .state('practiceexamservicecompetitiveSamplePaper', {
      url:'/{samplePaperNumber}',
      templateUrl:'views/practice/competitive_sample_paper.html',
      controller:'CompetitiveSamplePaperCtrl'
    }
  )
  .state('practiceexamservicesubject', {
    url:'/{subjectName}',
    templateUrl:'views/practice/subject.html',
    controller:'SubjectCtrl'
  }
)

两个动态子路由 - ui-router

2 个答案: