Изменить нг-включить с контроллером - PullRequest
Новая
       33

Изменить нг-включить с контроллером

0 голосов
/ 10 июня 2018

У меня есть структура вкладок, созданная из ng-reapet, которая показывает содержимое каждой вкладки на панели (то же самое, но различий).Я добавил 

<div ng-controller="myCtrl">
    <div ng-include="'tpl.html'">
    </div>
</div>

в каждую панель вкладок, чтобы отобразить содержимое в соответствии с выбранной вкладкой и ее хорошо, но когда я нажимаю на отправить в HTML (после заполнения там полей), я хочу нг-include должен быть заменен другим шаблоном html (представить результаты) и его контроллером.

Теперь я делаю $state.go("url"), и он переносит меня на другую страницу и использует маршрут, обновляющий страницу.

1 Ответ

0 голосов
/ 10 июня 2018

Попробуйте, 

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

<head>
  <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>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <div ng-controller="switchCtrl">
  <input type='button' ng-value='buttonText' ng-click="doEdit()" />
    <div ng-include="template.url"></div>
  </div>
</body>

</html>

Controller.js 

var app = angular.module('myApp', []);

app.controller('switchCtrl', function($scope) {

  $scope.templates = [{
    name: 'template-one.html',
    url: 'template-one.html'
  }, {
    name: 'template-two.html',
    url: 'template-two.html'
  }];

  $scope.hasPermissionToEdit = true;
  $scope.buttonText = 'Edit';
  $scope.isEditing = false;
  $scope.shared = 'shared value between templates.';
  $scope.template = $scope.templates[0];

  $scope.doEdit = function() {
    if ($scope.isEditing) {
      $scope.template = $scope.templates[0];
      $scope.isEditing = false;
      $scope.buttonText = 'Edit';
    } else {
      if ($scope.hasPermissionToEdit) {
        $scope.template = $scope.templates[1];
        $scope.isEditing = true;
        $scope.buttonText = 'Go back';
      } else {
        alert('you don\'t have permission to edit');
      }
    }
  }
});

Надеюсь, это поможет !!

...