HINWEIS: Nach Verengung, ich denke, es könnte mit position: relative zu tun haben, aber ich muss herausfinden, was zu tun ist.Links und Schaltflächen nicht feuern
Ich habe eine Anwendung, die ich von Grund auf neu erstellen, und keiner der Schaltflächen oder Links wird ausgelöst. Ich habe das Problem auf die CSS-Datei beschränkt, denn wenn ich das CSS entferne, funktionieren alle Buttons und Links.
Der Controller bindet Informationen an den Bereich, wie wenn ich $scope.test = "hello"; es an das DOM gebunden ist. Keine der Verknüpfungen oder Schaltflächen wird jedoch ausgelöst. Ich habe versucht, verschiedene Links und Schaltflächen zu mischen und anzupassen, und der Cursor ändert sich nicht in Zeiger, wenn der Mauszeiger über den Link/Button bewegt wird. Was vermisse ich/vergesse ich?
An der Unterseite habe ich die CSS enthalten.
index.html
<div ng-controller="MainController" class="main-guy">
{{test}}
<div style="width:100px; height:100px; position:absolute; background-color: blue" ng-click="info('please work')">Click</div>
<div class="screen-outside">
<a href="http://www.google.com">This is a test</a>
<div class="screen-inside" ui-view>
<!-- Screen changes with click -->
</div>
<a href="http://www.google.com">This is a test</a>
<button ng-click="hey()">HEY!</button>
<div class="screen-footer">
<div class="buttons-bar">
<div class="buttons-holder">
<div class="button-ind"><a ng-click="screen()">Rider</a></div>
<div class="button-ind"><button class="btn" ng-click="screen()">Audio</button></div>
<div class="button-ind">Power</div>
<div class="button-ind"><button class="btn" ng-click="screen()" value="Bluetooth"></div>
<div class="button-ind"><a ui-sref="#" ng-click="screen()">{{test}}</a></div>
</div>
</div>
</div>
</div>
<div class="footer-block-container">
<div class="bottom-block left-block"></div>
<div class="bottom-block right-block"></div>
</div>
</div>
MainController.js
$scope.hey = function(){
$window.alert("YAY!!!!");
};
$scope.test = 'Hello';
$scope.screen = function(){
console.log("Hey!!!");
};
$scope.info = function(msg){
console.log("Hey!!!");
}
style.css
.main-guy {
position:relative;
width: 640px;
height: 480px;
background-color: #050505;
margin: auto;
z-index:-1000;
}
.screen-outside {
margin-left: 10%;
margin-right: 10%;
width: 80%;
height: 90%;
background-color: #888888;
bottom: 0;
position: absolute;
}
.screen-inside {
margin:auto;
position:relative;
height:80%;
width:85%;
background-color: #666666;
}
.screen-footer {
position: relative;
bottom: 0;
margin: auto;
background-color: #AAAAAA;
height:20%;
width:100%;
}
.buttons-bar {
margin:auto;
height: 80%;
width: 70%;
position:relative;
background-color: #707070;
}
.buttons-holder {
width:80%;
margin: 0 auto;
}
.button-ind {
margin:auto;
position:relative;
width:20%;
height:40%;
background-color: #535353;
font-size:15px;
display:inline-block;
}
.btn {
background-color: transparent; border: 0; padding: 0; width:100%; height:100%;
}
.footer-block-container {
margin-top:80%;
width:100%;
bottom:0;
left:0;
height:25%;
position:absolute;
}
.bottom-block {
width:20%;
height:100%;
background-color:#3A3A3A;
}
.left-block {
float:left;
}
.right-block {
float:right;
}