Search code examples
angularjstwitter-bootstrapbootstrap-modalbrowser-cacheangularjs-1.6

Do not cache or read cache | AngularJS 1.6 | Bootstrap 3.3

I have a modal Bootstrap, inside a call is made $http with Angular. But only when loading the page goes to the server and retrieves the data, the question is:

Is it possible to make the call to "http" every time the Bootstrap Modal is opened?

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

helloApp.controller("CompanyCtrl",['$scope',function($scope){

	$scope.numbers = [1,2,3,4,5,6,7,8,9];
	$scope.tableTitle = "SEMESTRE ";
	$scope.checked1 = false; //DELETE

	$scope.number = 7;
	$scope.getNumber = function(num) {
	    return new Array(num);   
	}

	$scope.companies = [
                    { 'name':'Infosys Technologies',
                    	'employees': 125000,
                    	'headoffice': 'Bangalore'},
                    	{ 'name':'Cognizant Technologies',
	                    	'employees': 100000,
	                    	'headoffice': 'Bangalore'},
	                    	{ 'name':'Wipro',
		                    	'employees': 115000,
		                    	'headoffice': 'Bangalore'},
		                    	{ 'name':'Tata Consultancy Services (TCS)',
			                    	'employees': 150000,
			                    	'headoffice': 'Bangalore'},
			                    	{ 'name':'HCL Technologies',
				                    	'employees': 90000,
				                    	'headoffice': 'Noida'},
                    ];
    $scope.vAddGroup = [

    ];

$scope.addGroup = function(name){	
	var index = -1;	
	var comArr = eval( $scope.companies );
		for( var i = 0; i < comArr.length; i++ ) {
			if( comArr[i].name === name ) {
				index = i;
				break;
			}
		}
		if( index === -1 ) {
			alert( "Something gone wrong" );
		}

	$scope.vAddGroup.push({ 'name':comArr[index].name, 'employees':comArr[index].employees, 'headoffice':comArr[index].headoffice });
	$scope.checked1 = true;

	var d = document.getElementById("1"); // IDENTIFICADOR UNICO CADA MATERIA
	d.className = " subjectOK not-active";

};


$scope.addRow = function(){		
	$scope.companies.push({ 'name':$scope.name, 'employees': $scope.employees, 'headoffice':$scope.headoffice });
	$scope.name='';
	$scope.employees='';
	$scope.headoffice='';
};

$scope.removeRow = function(name){				
		var index = -1;		
		var comArr = eval( $scope.vAddGroup );
		for( var i = 0; i < comArr.length; i++ ) {
			if( comArr[i].name === name ) {
				index = i;
				break;
			}
		}
		if( index === -1 ) {
			alert( "Something gone wrong" );
		}
		$scope.vAddGroup.splice( index, 1 );	
		$scope.checked1 = false;

		var d = document.getElementById("1"); // IDENTIFICADOR UNICO CADA MATERIA
		d.className = " subject";
	};

}]);



helloApp.controller('DataCtrl', function($scope, $http) {
  $http.get("http://www.w3schools.com/angular/customers.php")
  .then(function(response) {
      $scope.content = response.data.records;
  }, function(response) {
      $scope.contentWrong = response.config;
  });

});


function closeModal(){

	$(".modalCloseID").on('hide.bs.modal', function () {
	});

	console.log("TEST");

	$('.modalCloseID').modal('hide');
}
.subject {
    background-color: #4CAF50; /* Green */
    /* border: none; */
    border: 1px solid white;
    border-radius: 4px;
    color: white; 
    padding: 1px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    cursor: pointer;
    cursor: hand;
    line-height:20px;
    -webkit-transition-duration: .4s; /* Safari */
    transition-duration: .4s;

    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
     -khtml-user-select: none; /* Konqueror */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  not supported by any browser */

}
.subject:hover {
    background-color: #241E4E; 
    color: white; 
    border: 1px solid #555555;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);

}
.subject:focus {
outline:0px;
}

.subjectOK {
	 background-color: white; 
    /* border: none; */
    border: 2px solid black;
    border-radius: 30%;
    color: black; 
    padding: 1px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    cursor:not-allowed;
    line-height:20px;
    -webkit-transition-duration: .4s; /* Safari */
    transition-duration: .4s;


     -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
     -khtml-user-select: none; /* Konqueror */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  not supported by any browser */

}

.csstr {
	border: 0px solid black;

}


.csstitle {
    border-left: 6px solid red;
    background-color: lightgrey;
}

.not-active {
   pointer-events: none;
   cursor: default;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="helloApp">
<head>

	<meta http-equiv="Expires" content="0">
	<meta http-equiv="Last-Modified" content="0">
	<meta http-equiv="Cache-Control" content="no-cache, mustrevalidate">
	<meta http-equiv="Pragma" content="no-cache">


<title>AngularJS</title>


		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
		<link rel="stylesheet" href="main.css">
		<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
		<script type="text/javascript" src="controllers.js"></script>


			
</head>
<!-- Controller name goes here -->
<body ng-controller="CompanyCtrl">


	<h2 class="csstitle">Seleccionar Materias</h2>



	<div class="table-responsive">          
	  <table class="table">
	    <thead>
	      <tr>
	        <th ng-repeat="number in numbers" class="text-center">{{tableTitle}}{{number}}</th>
	      </tr>
	    </thead>
	    <tbody ng-app="helloApp" ng-controller="DataCtrl">
	      <tr class="csstr" ng-repeat="item in content | limitTo: 7">

	        <td> <!-- SEMESTRE #1 -->
	        	<div id="{{numbers[0]}}" class="subject" data-toggle="modal" data-target="#myModal{{numbers[0]}}">{{content[$index].City}} <br/> descripcion <br/> + S1</div>
	        </td>

	        <td><!-- SEMESTRE #2 -->
	        	<div class="subject" data-toggle="modal" data-target="#myModal{{numbers[1]}}">{{content[$index].City}} <br/> descripcion <br/> + S2</div>
	        </td>

	        <td><!-- SEMESTRE #3 -->
	      	    <div class="subject" data-toggle="modal" data-target="#myModal{{numbers[2]}}">{{item.City}} <br/> descripcion <br/> + S3</div>	
	        </td>

	        <td><!-- SEMESTRE #4 -->
	        	<div class="subject" data-toggle="modal" data-target="#myModal{{numbers[3]}}">{{item.City}} <br/> descripcion <br/> + S4</div>	
	        </td>

	        <td><!-- SEMESTRE #5 -->
	        	<div class="subject" data-toggle="modal" data-target="#myModal{{numbers[4]}}">{{item.City}} <br/> descripcion <br/> + S5</div>	
	        </td>

	        <td><!-- SEMESTRE #6 -->
	        	<div class="subject" data-toggle="modal" data-target="#myModal{{numbers[5]}}">{{item.City}} <br/> descripcion <br/> + S6</div>	
	        </td>

	        <td><!-- SEMESTRE #7 -->
	        	<div class="subject" data-toggle="modal" data-target="#myModal{{numbers[6]}}">{{item.City}} <br/> descripcion <br/> + S7</div>	
	        </td>

	        <td><!-- SEMESTRE #8 -->
	        	<div class="subject" data-toggle="modal" data-target="#myModal{{numbers[7]}}">{{item.City}} <br/> descripcion <br/> + S8</div>	
	        </td>

	        <td><!-- SEMESTRE #9 -->
	        	<div class="subject" data-toggle="modal" data-target="#myModal{{numbers[8]}}">{{item.City}} <br/> descripcion <br/> + S9</div>	
	        </td>

	      </tr>

	    </tbody>
	  </table>
  	</div>



<div ng-app="helloApp" ng-controller="DataCtrl" ng-repeat="item in numbers | limitTo: 9">
  <!-- Modal -->
  <div class="modal fade modalCloseID" id="myModal{{item}}" role="dialog" data-backdrop="static">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Materia # {{item}}</h4>
        </div>
        <div class="modal-body">
          <p>Seleccione un horario.</p>

					<label>Filtro</label>
					<input type="text" class="form-control" ng-model="searchKeyword"/> 

					<div ng-app="helloApp" ng-controller="DataCtrl">
						{{content}}
						{{contentWrong}}
					</div>


					<table class="table">
						<tr>
							<th>Name
							</th>
							<th>Employees
							</th>
							<th>Head Office
							</th>
							<th>Acción
							</th>
						</tr>
						<tr ng-repeat="company in companies  | filter: searchKeyword ">
							<td>
								{{company.name}}
							</td>
							<td>
								{{company.employees}}
							</td>
							<td>
								{{company.headoffice}}
							</td>
							<td>
							<input type="button" value="Agregar" class="btn btn-primary" onclick="closeModal()" ng-click="addGroup(company.name)" ng-disabled="checked{{item}}"/>
							</td>
						</tr>
					</table>

				</div>
       		<div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
        </div>
      </div>
    </div>
  </div>
 	<!-- END MODAL-->
</div>
 



	<hr>
	<h2 class="csstitle">Materias seleccionadas</h2>

	<table class="table">
		<tr>
			<th>Name
			</th>
			<th>Employees
			</th>
			<th>Head Office
			</th>
			<th>Acción
			</th>
		</tr>
		<tr ng-repeat="item in vAddGroup">
			<td>
				{{item.name}}
			</td>
			<td>
				{{item.employees}}
			</td>
			<td>
				{{item.headoffice}}
			</td>
			<td>
			<input type="button" value="Eliminar" class="btn btn-danger" ng-click="removeRow(item.name)"/>
			</td>
		</tr>
	</table>





</body>
</html>

Solution

  • Below is the easy "as little changes as possible" answer: I added ng-click on your buttons and wrapped your http-call in a function which is called when clicking any of the buttons.

    The longer (and more correct) answer would include:

    • Probably scrapping jquery from your project all together, because angular and jquery really doesn't play all that well together.

    • ng-controller="DataCtrl" ng-repeat="item in numbers" When you do this, you get one DataCtrl-instance for each "item". Usually with angular and modals, you only want one modal and change the content as you show and hide it. (When your app is small anyway.)

    • You have made things a little bit DRY-er by looping through your numbers for each column with buttons. I would probably take that further and create a directive for a "subject-button" (Since the code here is almost identical in every button). And loop through each row as well.

    • Maybe have a look at UI Bootstrap. But in time you'll probably figure out that the quick fix for modals in angular is to skip all other dependencies and just use something like ng-class="'show-modal':showModal". Bootstrap-scripts, data-toggles and jquery are just adding layers to something that is already very simple with straight up angular/css.

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

helloApp.controller("CompanyCtrl",['$scope',function($scope){

	$scope.numbers = [1,2,3,4,5,6,7,8,9];
	$scope.tableTitle = "SEMESTRE ";
	$scope.checked1 = false; //DELETE

	$scope.number = 7;
	$scope.getNumber = function(num) {
	    return new Array(num);   
	}

	$scope.companies = [
                    { 'name':'Infosys Technologies',
                    	'employees': 125000,
                    	'headoffice': 'Bangalore'},
                    	{ 'name':'Cognizant Technologies',
	                    	'employees': 100000,
	                    	'headoffice': 'Bangalore'},
	                    	{ 'name':'Wipro',
		                    	'employees': 115000,
		                    	'headoffice': 'Bangalore'},
		                    	{ 'name':'Tata Consultancy Services (TCS)',
			                    	'employees': 150000,
			                    	'headoffice': 'Bangalore'},
			                    	{ 'name':'HCL Technologies',
				                    	'employees': 90000,
				                    	'headoffice': 'Noida'},
                    ];
    $scope.vAddGroup = [

    ];

$scope.addGroup = function(name){	
	var index = -1;	
	var comArr = eval( $scope.companies );
		for( var i = 0; i < comArr.length; i++ ) {
			if( comArr[i].name === name ) {
				index = i;
				break;
			}
		}
		if( index === -1 ) {
			alert( "Something gone wrong" );
		}

	$scope.vAddGroup.push({ 'name':comArr[index].name, 'employees':comArr[index].employees, 'headoffice':comArr[index].headoffice });
	$scope.checked1 = true;

	var d = document.getElementById("1"); // IDENTIFICADOR UNICO CADA MATERIA
	d.className = " subjectOK not-active";

};


$scope.addRow = function(){		
	$scope.companies.push({ 'name':$scope.name, 'employees': $scope.employees, 'headoffice':$scope.headoffice });
	$scope.name='';
	$scope.employees='';
	$scope.headoffice='';
};

$scope.removeRow = function(name){				
		var index = -1;		
		var comArr = eval( $scope.vAddGroup );
		for( var i = 0; i < comArr.length; i++ ) {
			if( comArr[i].name === name ) {
				index = i;
				break;
			}
		}
		if( index === -1 ) {
			alert( "Something gone wrong" );
		}
		$scope.vAddGroup.splice( index, 1 );	
		$scope.checked1 = false;

		var d = document.getElementById("1"); // IDENTIFICADOR UNICO CADA MATERIA
		d.className = " subject";
	};

}]);



helloApp.controller('DataCtrl', function($scope, $http) {

  $scope.openModal = function(){
    $http.get("http://www.w3schools.com/angular/customers.php")
    .then(function(response) {
      $scope.content = response.data.records;
    }, function(response) {
      $scope.contentWrong = response.config;
    });
  };
  
  $scope.openModal();
  
});

function closeModal(){

	$(".modalCloseID").on('hide.bs.modal', function () {
	});

	console.log("TEST");

	$('.modalCloseID').modal('hide');
}
    .subject {
    background-color: #4CAF50; /* Green */
    /* border: none; */
    border: 1px solid white;
    border-radius: 4px;
    color: white; 
    padding: 1px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    cursor: pointer;
    cursor: hand;
    line-height:20px;
    -webkit-transition-duration: .4s; /* Safari */
    transition-duration: .4s;

    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
     -khtml-user-select: none; /* Konqueror */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  not supported by any browser */

}
.subject:hover {
    background-color: #241E4E; 
    color: white; 
    border: 1px solid #555555;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);

}
.subject:focus {
outline:0px;
}

.subjectOK {
	 background-color: white; 
    /* border: none; */
    border: 2px solid black;
    border-radius: 30%;
    color: black; 
    padding: 1px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    cursor:not-allowed;
    line-height:20px;
    -webkit-transition-duration: .4s; /* Safari */
    transition-duration: .4s;


     -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
     -khtml-user-select: none; /* Konqueror */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  not supported by any browser */

}

.csstr {
	border: 0px solid black;

}


.csstitle {
    border-left: 6px solid red;
    background-color: lightgrey;
}

.not-active {
   pointer-events: none;
   cursor: default;
}
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="helloApp">
<head>

	<meta http-equiv="Expires" content="0">
	<meta http-equiv="Last-Modified" content="0">
	<meta http-equiv="Cache-Control" content="no-cache, mustrevalidate">
	<meta http-equiv="Pragma" content="no-cache">


<title>AngularJS</title>


		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
		<link rel="stylesheet" href="main.css">
		<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
		<script type="text/javascript" src="controllers.js"></script>


			
</head>
<!-- Controller name goes here -->
<body ng-controller="CompanyCtrl">


	<h2 class="csstitle">Seleccionar Materias</h2>



	<div class="table-responsive">          
	  <table class="table">
	    <thead>
	      <tr>
	        <th ng-repeat="number in numbers" class="text-center">{{tableTitle}}{{number}}</th>
	      </tr>
	    </thead>
	    <tbody ng-app="helloApp" ng-controller="DataCtrl">
	      <tr class="csstr" ng-repeat="item in content | limitTo: 7">

	        <td> <!-- SEMESTRE #1 -->
	        	<div id="{{numbers[0]}}" class="subject" ng-click="openModal()" data-toggle="modal" data-target="#myModal{{numbers[0]}}">{{content[$index].City}} <br/> descripcion <br/> + S1</div>
	        </td>

	        <td><!-- SEMESTRE #2 -->
	        	<div class="subject" ng-click="openModal()" data-toggle="modal" data-target="#myModal{{numbers[1]}}">{{content[$index].City}} <br/> descripcion <br/> + S2</div>
	        </td>

	        <td><!-- SEMESTRE #3 -->
	      	    <div class="subject" ng-click="openModal()" data-toggle="modal" data-target="#myModal{{numbers[2]}}">{{item.City}} <br/> descripcion <br/> + S3</div>	
	        </td>

	        <td><!-- SEMESTRE #4 -->
	        	<div class="subject" ng-click="openModal()" data-toggle="modal" data-target="#myModal{{numbers[3]}}">{{item.City}} <br/> descripcion <br/> + S4</div>	
	        </td>

	        <td><!-- SEMESTRE #5 -->
	        	<div class="subject" ng-click="openModal()" data-toggle="modal" data-target="#myModal{{numbers[4]}}">{{item.City}} <br/> descripcion <br/> + S5</div>	
	        </td>

	        <td><!-- SEMESTRE #6 -->
	        	<div class="subject" ng-click="openModal()" data-toggle="modal" data-target="#myModal{{numbers[5]}}">{{item.City}} <br/> descripcion <br/> + S6</div>	
	        </td>

	        <td><!-- SEMESTRE #7 -->
	        	<div class="subject" ng-click="openModal()" data-toggle="modal" data-target="#myModal{{numbers[6]}}">{{item.City}} <br/> descripcion <br/> + S7</div>	
	        </td>

	        <td><!-- SEMESTRE #8 -->
	        	<div class="subject" ng-click="openModal()" data-toggle="modal" data-target="#myModal{{numbers[7]}}">{{item.City}} <br/> descripcion <br/> + S8</div>	
	        </td>

	        <td><!-- SEMESTRE #9 -->
	        	<div class="subject" ng-click="openModal()" data-toggle="modal" data-target="#myModal{{numbers[8]}}">{{item.City}} <br/> descripcion <br/> + S9</div>	
	        </td>

	      </tr>

	    </tbody>
	  </table>
  	</div>



<div ng-app="helloApp" ng-controller="DataCtrl" ng-repeat="item in numbers | limitTo: 9">
  <!-- Modal -->
  <div class="modal fade modalCloseID" id="myModal{{item}}" role="dialog" data-backdrop="static">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Materia # {{item}}</h4>
        </div>
        <div class="modal-body">
          <p>Seleccione un horario.</p>

					<label>Filtro</label>
					<input type="text" class="form-control" ng-model="searchKeyword"/> 

					<div ng-app="helloApp" ng-controller="DataCtrl">
						{{content}}
						{{contentWrong}}
					</div>


					<table class="table">
						<tr>
							<th>Name
							</th>
							<th>Employees
							</th>
							<th>Head Office
							</th>
							<th>Acción
							</th>
						</tr>
						<tr ng-repeat="company in companies  | filter: searchKeyword ">
							<td>
								{{company.name}}
							</td>
							<td>
								{{company.employees}}
							</td>
							<td>
								{{company.headoffice}}
							</td>
							<td>
							<input type="button" value="Agregar" class="btn btn-primary" onclick="closeModal()" ng-click="addGroup(company.name)" ng-disabled="checked{{item}}"/>
							</td>
						</tr>
					</table>

				</div>
       		<div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
        </div>
      </div>
    </div>
  </div>
 	<!-- END MODAL-->
</div>
 



	<hr>
	<h2 class="csstitle">Materias seleccionadas</h2>

	<table class="table">
		<tr>
			<th>Name
			</th>
			<th>Employees
			</th>
			<th>Head Office
			</th>
			<th>Acción
			</th>
		</tr>
		<tr ng-repeat="item in vAddGroup">
			<td>
				{{item.name}}
			</td>
			<td>
				{{item.employees}}
			</td>
			<td>
				{{item.headoffice}}
			</td>
			<td>
			<input type="button" value="Eliminar" class="btn btn-danger" ng-click="removeRow(item.name)"/>
			</td>
		</tr>
	</table>





</body>
</html>