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%; 
}