Change ng-include with controller

241 Views Asked by yanivz At 10 June 2018 at 11:23

I have a tab structure made of ng-reapet which shows the content of each tab in a panel (the same one but diff content). I have added

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

in each tab-panel to display the content according to selected tab and its fine, but when i click on submit within the html(after filling the fields there) I want the ng-include to be replaced with another html (the submit results) template and his controller.

Now i am doing $state.go("url") and its taking me to another page and using route refresh the page.

Original Q&A

There are 1 best solutions below

vizsatiz On 10 June 2018 at 11:48

Try this out,

<!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');
      }
    }
  }
});

Hope this helps !!

Change ng-include with controller

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in ANGULARJS

Related Questions in ANGULARJS-NG-INCLUDE

Trending Questions

Popular # Hahtags

Popular Questions