I am working in a project, where we adopt among others already in-use pages to an app. The app will have all the code in a JS & an HTML file.
The used code creates HTML pages that work fine. One of the subpages does have a list of elements that have a (+) or (>) button on their right, where the first is opening the item, enlisting subitems. The code does this as you can see with functions like $scope.switchOnOff. The item opens when clicking on the (+) button, which becomes a (-) button.
This is not the case with the Angular.JS code that I try to create from the generated & working code by hand. Here, I do not get any error messages (when opening the Google chrome window with F12), but nothing happens; the (+) button remans the same, and the list of subitems does not open.
I have another part on other subpages of my created Angular.JS code where actually list items open and show their subitems. In these cases, however, there is no object.innerHTML += '…' in the code.
I made the following example that will make the understanding of the problem I have easier. There are two items without a list, which should open when the (+) button is pressed. This is the case for the first item. I need help concerning the second item that does not open when pressing it's (+) button.
My question: What is the problem with the second item?
Thank you for your help & ideas!
Code example: controller.js, Test.html & main.css follow:
var app = angular.module("MyApp", ['ngSanitize']);
/**
* Controls the messages.
*
* @param $scope
* @param $http
*/
app.controller("PostsCtrl", function($scope, $http) {
$http.defaults.useXDomain = true;
delete $http.defaults.headers.common['X-Requested-With'];
$scope.processHTML = function(html) {
// Combine HTML
return $scope.myHTML;
}
/**
* Vacation
*/
$scope.instruction = function(object) {
if (document.getElementById("instruction").style.display == "block") {
document.getElementById("instruction").style.display = "none";
document.getElementById('instructionGroup').className = 'contact_group parent';
} else {
document.getElementById("instruction").style.display = "block";
document.getElementById('instructionGroup').className = 'contact_group parent active';
}
}
/**
* Info point
*/
$scope.alt = '';
$scope.switchOnOff = function(object) {
if (object.className == 'item parent') {
$scope.alt = object.innerHTML;
object.className = 'item parent active';
object.innerHTML += '<ul class="site_submenu"><li class="item white-7"><div class="item_inner"><div class="item_txt"><a class="item_link" href="http://ift.tt/1fP3KQW">Jahresblatt</a></div><span class="item_icon"></span></div></li><li class="item white-7"><div class="item_inner"><div class="item_txt"><a class="item_link" href="http://ift.tt/1IOApmM">Zeiterfassung</a></div><span class="item_icon"></span></div></li></ul>';
} else {
object.className = 'item parent';
object.innerHTML = $scope.alt;
}
}
});
/*
### smartphones Grid
.col-ph
### Tablets grid
.col-tb
### Desktop grid
.col-dt
### large screen grid
-col-ls
*/
body {
background:white;
margin: 0;
padding:0;
font-family:'Open Sans','droid Sans',arial, helvetica, sans-serif;
}
body.height100 {
overflow:hidden;
}
/*farben - hintergrund*/
/*ivmblue*/
.ivmblue0 {
background: #7f96c1!important;
}
.ivmblue20 {
background: #5479ad!important;
}
.ivmblue40 {
background: #295898!important;
}
[…]
<!DOCTYPE html>
<html>
<head>
<title>Test page</title>
<link rel="stylesheet" href="http://ift.tt/1wORPGp">
<script src="http://ift.tt/13jmVM7"></script>
<script src="http://ift.tt/1toXtPU"></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-sanitize.min.js"></script> <!-- to parse HTML code safely! -->
<script src="js/controllers.js"></script>
<link href="css/main.css" rel="stylesheet" type="text/css">
<link href="http://ift.tt/YlWz97" rel="stylesheet" type="text/css">
</head>
<body ng-app="MyApp">
<div ng-controller="PostsCtrl">
<!-- START PAGE -->
<!-- Start page header -->
<header class="start">
<div class="header_top Group">
<div class="header_background ivmblue40">
<element><b>Head</b></element>
</div>
</div>
</header>
<!-- Start page body -->
<div data-role="page" id="infoPoint">
<section class="contact_blog">
<div class="contact_group parent" id="instructionGroup">
<div class="org">
<div class="contact_group_txt" ng-click="instruction(this)">
<a href="#" class="link">Instruction</a>
</div>
<span class="contact_group_icon"></span>
</div>
</div>
<div id="instruction" style="display:none">
<ol>
<div>Fill out the form.</div>
<div>Send data using the email button.</div>
</ol>
</div>
<div class="contact_group parent" id="infoPointGroup">
<div class="org">
<div class="contact_group_txt" ng-click="switchOnOff(this);">
<a href="#" class="link">Tutorials</a>
</div>
<span class="contact_group_icon"></span>
</div>
</div>
</section>
</div>
</div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire