ng-click无法在AngularJS，Cordova中工作

Question

我们正在撰写Ionic，Cordova，AngularJS的应用程序。 我的代码是https://jsfiddle.net/sweety1112/wag7ye4b/1/ 我的问题是，ui-sref或ng-click没有按预期工作。有没有错误？

$stateProvider 
     .state('app', { 
      url: '', 
      abstract: true, 
      templateUrl: 'HomePage.html' 

     }) 
     .state('app.home', { 
      url: '/home', 
      templateUrl:'templates/HomeScreen.html', 
      controller: 'HomePageCtrl' 
     }) 
     .state('app.scan', 

      { parent:'app', 
      url: '/scan', 
      templateUrl: 'templates/Scan.html' 
      // controller: 'SettingsController' 
     }) 
     .state('app.help', { 
      url: '/help', 
      templateUrl:'templates/Help.html' 
     }) 

在HTML我有

$scope.funOne=function(){ 
alert("Button Clicked"); }; 

那么这应该从HTML

<div> <br/><br/><br/><br/><br/><br/><div ng-click="funOne()"><h1> Home Screen</h1> </div> 
<div class="centerButton" ng-click="funOne()"> 
    <a ui-href="app.help"> <img src='assets/img/start_btn.png'/> </a> 
    <p>START</p> 
</div> 

NG-点击由具有主屏幕上的DIV工作进行调用，但它不适用于Image。即使ui-sref也不适用于图像。

Answer 1

用css类更新了小提琴，并更改了ng-click位置。你的CSS与ng-click相冲突，因此需要在父级别。

Updated Fiddle

的CSS更改：

.bar-positive { 
    background-color: #C12537; 
    border: none; 
} 
.container { 
    width:550px; 
    height:550px; 
    position:relative; 
    z-index: -1; 
    display:block; 
} 
.container .left, .right div p { 
    top: 44%; 
    left: -14%; 
} 
.container .right { 
    transform: rotate(90deg); 
} 
.rotate div p { 
    position:absolute; 
    margin:0; 
    padding:0; 
    font-family:'Roboto'; 
    font-size: 22px; 
    color: #FFFFFF; 
    top:27%; 
    left:20%; 
} 
.text { 
    transform: rotate(360deg); 
} 
.container img { 
    position:absolute; 
} 
.rotate img { 
    width:100%; 
    /*-webkit-transform-origin: 70% 105%;*/ 
    z-index: -1; 
    position:relative; 
} 
.rotate { 
    width:72%; 
    transition: transform 0.5s linear; 
    transform-origin: 70% 105%; 
    position:absolute; 
} 
.bottom img { 
    /*-webkit-transform: rotate(180deg);*/ 
    z-index: -1; 
    margin-top: 308px; 
    margin-left: 141px; 
    transform: rotate(180deg); 
} 
.left img { 
    transform: rotate(270deg); 
    z-index: -1; 
} 
.right img { 
    /*-webkit-transform: rotate(90deg);*/ 
    z-index: -1; 
} 
.rotate.right div p { 
    top:22%; 
    left:9%; 
    transform: rotate(270deg); 
} 
.rotate.bottom div p { 
    position: absolute; 
    margin: 0; 
    padding: 0; 
    font-family:'Roboto'; 
    font-size: 22px; 
    color: #FFFFFF; 
    top: 79%; 
    left: 100%; 
} 
.rotate.left div p { 
    top:78%; 
    left:26%; 
    transform: rotate(360deg); 
} 
/*New style**/ 
.rotate div { 
    position: absolute; 
    padding:0; 
    margin:0; 
    width:100%; 
    height:100%; 
    left:0; 
    right:0; 
    top:0; 
    bottom:0; 
    transition: transform 0.5s linear; 
} 
.flex-container { 
    height: 100%; 
    padding: 0; 
    margin: 0; 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-direction: column; 
} 
.centerButton img, .centerButton p { 
    position:absolute; 
    width:100%; 
    top:-50%; 
    left:-50%; 
    right:-50%; 
    bottom:-50%; 
    margin:auto; 
} 
.centerButton p { 
    height:10%; 
    text-align:center; 
    font-family:'Roboto'; 
    font-size: 22px; 
    color: #FFFFFF; 
} 
.centerButton { 
    width:50%; 
    height:50%; 
    margin:auto; 
    position:absolute; 
    top:-45%; 
    left:-50%; 
    right:-52%; 
    bottom:-50%; 
} 

UPDATE：

你的z-index的CSS类是给这个问题。修正了在updated fiddle

CSS以供参考：

.bar-positive { 
    background-color: #C12537; 
    border: none; 
} 
.container { 
    width:550px; 
    height:550px; 
    position:relative; 
    z-index: 9999; 
    display:block; 
} 
.container .left, .right div p { 
    top: 44%; 
    left: -14%; 
} 
.container .right { 
    transform: rotate(90deg); 
} 
.rotate div p { 
    position:absolute; 
    margin:0; 
    padding:0; 
    font-family:'Roboto'; 
    font-size: 22px; 
    color: #FFFFFF; 
    top:27%; 
    left:20%; 
} 
.text { 
    transform: rotate(360deg); 
} 
.container img { 
    position:absolute; 
} 
.rotate img { 
    width:100%; 
    /*-webkit-transform-origin: 70% 105%;*/ 
    z-index: 9999; 
    position:relative; 
} 
.rotate p { 
    z-index:9999; 
} 
.rotate { 
    width:72%; 
    transition: transform 0.5s linear; 
    transform-origin: 70% 105%; 
    position:absolute; 
} 
.bottom img { 
    /*-webkit-transform: rotate(180deg);*/ 
    z-index: 9999; 
    margin-top: 308px; 
    margin-left: 141px; 
    transform: rotate(180deg); 
} 
.left img { 
    transform: rotate(270deg); 
    z-index: 9999; 
} 
.right img { 
    /*-webkit-transform: rotate(90deg);*/ 
    z-index: 9999; 
} 
.rotate.right div p { 
    top:22%; 
    left:9%; 
    transform: rotate(270deg); 
} 
.rotate.bottom div p { 
    position: absolute; 
    margin: 0; 
    padding: 0; 
    font-family:'Roboto'; 
    font-size: 22px; 
    color: #FFFFFF; 
    top: 79%; 
    left: 100%; 
} 
.rotate.left div p { 
    top:78%; 
    left:26%; 
    transform: rotate(360deg); 
} 
/*New style**/ 
.rotate div { 
    position: absolute; 
    padding:0; 
    margin:0; 
    width:100%; 
    height:100%; 
    left:0; 
    right:0; 
    top:0; 
    bottom:0; 
    transition: transform 0.5s linear; 
} 
.flex-container { 
    height: 100%; 
    padding: 0; 
    margin: 0; 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-direction: column; 
} 
.centerButton img, .centerButton p { 
    position:absolute; 
    width:100%; 
    top:-50%; 
    left:-50%; 
    right:-50%; 
    bottom:-50%; 
    margin:auto; 
} 
.centerButton p { 
    height:10%; 
    text-align:center; 
    font-family:'Roboto'; 
    font-size: 22px; 
    color: #FFFFFF; 
} 
.centerButton { 
    width:50%; 
    height:50%; 
    margin:auto; 
    position:absolute; 
    top:-45%; 
    left:-50%; 
    right:-52%; 
    bottom:-50%; 
}