angularjs вставляет различные HTML-шаблоны в разных условиях

Question

angularjs вставляет различные HTML-шаблоны в разных условиях

0

Мой HTML имеет следующую часть:

<div ng-if="body">
  <div align="center">
    <h3>Body</h3>
    ...
  </div>  
</div>

<div ng-if="memory">
  <div align="center">
  <h3>Memory game</h3> <=
  </div>  
</div>

Первый div, где ng-if="body" имеет фиксированный HTML, и я просто изменяю значения модели, чтобы иметь динамический вид.

В этом втором div, где ng-if="memory" я хочу вставить разные шаблоны, которые находятся в разных HTML файлах, на основе условия (возможно, определенного в моем контроллере?)

Мой контроллер имеет что-то вроде следующего:

var exerciseType = Number($stateParams.exerciseId);
    console.log("Exe type from client: "+ exerciseType);
    if(exerciseType===1 ||exerciseType===3|| exerciseType===5 || 
        exerciseType===7 || exerciseType===9 || exerciseType===11 || exerciseType===12){
        $scope.body=true
    }
    else if(exerciseType===2){
        $scope.memory=true
    }

Чтобы дать больше информации: на родительской странице у меня есть список упражнений с аккордеоном, который представляет собой смесь упражнений, связанных с телом и памятью, и при нажатии на элемент списка загружается соответствующая страница упражнений. Вот почему эти $stateParams.exerciseId Теперь упражнения, связанные с телом, имеют одинаковую структуру и, следовательно, они имеют общий HTML: только значения модели изменяются для разных упражнений, связанных с телом.

С другой стороны, упражнения, связанные с памятью, имеют совершенно другую логику, и поэтому каждое упражнение имеет собственный HTML.

Маршрут:

.state('tab.plan', {
      url: '/plan',
       resolve: {
        authenticated: ['djangoAuth', function(djangoAuth){
          return djangoAuth.authenticationStatus();
        }],
      },
      views: {
        'tab-plan': {
          templateUrl: '/templates/tab-plan.html', <= my accordion list
          controller: 'planCtrl'
        }
      },
      cache: false
    })

    .state('tab.exercise', {
      url: '/plan/:exerciseId', //:dayId/:exerciseId
       resolve: {
        authenticated: ['djangoAuth', function(djangoAuth){
          return djangoAuth.authenticationStatus();
        }],
      },
      views: {
        'tab-plan': {
          templateUrl: '/templates/video.html', <= page where exercises are loaded, the first code snippet is from this page!
          controller: 'videoCtrl'
        }
      },
       cache: false
    })

Как мне это сделать?

Nitish 03 авг. 2016, в 12:43

Источник

0

С какой именно проблемой вы сталкиваетесь?
Mohit Yadav 03 авг. 2016, в 10:58
0

Я не совсем уверен, как я могу вставить такой различный HTML? ng-include кажется вариантом, но не уверен, как его использовать
Thinker 03 авг. 2016, в 11:04

Теги:

angularjs

1 ответ

Ещё вопросы

С какой именно проблемой вы сталкиваетесь?
Я не совсем уверен, как я могу вставить такой различный HTML? ng-include кажется вариантом, но не уверен, как его использовать

Nitish · Answer 1 · 2016-08-03T08-18-00.000Z

Я исправил это с помощью ng-include:

<div ng-if="memory">
  <div align="center">
  <h3>Memory game</h3>
  <ng-include src="template"></ng-include>
  </div>  
</div>

И в моем контроллере:

var exerciseType = Number($stateParams.exerciseId);
    console.log("Exe type from client: "+ exerciseType);
    if(exerciseType===1 ||exerciseType===3|| exerciseType===5 || 
        exerciseType===7 || exerciseType===9 || exerciseType===11 || exerciseType===12){
        $scope.body=true
    }
    else if(exerciseType===2 || exerciseType===4){
        $scope.memory=true
        if(exerciseType===2){
            $scope.template="./templates/template1.html"
        }
        if(exerciseType===4){
            $scope.template="./templates/template2.html"
        }
    }

И я создал два HTML-шаблона template1.html и template2.html