ng-click not working in AngularJS, Cordova

Question

We are writing an application in Ionic, Cordova, AngularJS. My code is here https://jsfiddle.net/sweety1112/wag7ye4b/1/ My problem is that ui-sref or ng-click is not working as expected. Are there any errors?

 $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' 
        })

In HTML i have

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

Then this should be called from the 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-click is working from the div which has Home Screen but it is not working on Image. Even ui-sref is not working on the image.

I think you not defining the dependencies correctly or not including them in you index.html file. Changed a bit and this fiddle is working jsfiddle.net/wag7ye4b/3 — V31
– V31, Commented Mar 3, 2015 at 7:08
But click on heading Home Screen is working. But click on image is not working? Any ideas? — Shraddha Shravagi
– Shraddha Shravagi, Commented Mar 3, 2015 at 8:35

V31 · Accepted Answer · 2015-03-04 10:50:09Z

Updated the fiddle with the css classes as well changed the ng-click position. Your css is conflicting with the ng-click and hence needs to be at the parent level.

Updated Fiddle

Css Changed:

.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:

Your z-index in the css class was giving the issue. Corrected that in the updated fiddle

CSS for reference:

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

It is working on outer div but i want seperate function for each petal. Which is not working. Sorry but i am very new to CSS. jsfiddle.net/sweety1112/wag7ye4b/10
@Sweety: added the updated section your z-index was making the errors. Now the fiddle is working as expected.
Code i running on web but not on mobile? Any ideas? I dont see same flower like thing on mobile?
@sweety the img is having margin-top and left in px which is not responsive...add that in percentage and you would be fine. If you think the answer above met your desktop requirements kindly mark this answer as accepted.
I also have a question stackoverflow.com/questions/29027644/… on same platform. Could you please hlep me?

Collectives™ on Stack Overflow

ng-click not working in AngularJS, Cordova

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related