2015-01-05 2 views
0

Я очень новый Угловой js Может ли кто-нибудь мне помочь.ng-click не работает дочерние элементы

Мой HTML-код:

<th> 
    <a class="tooltips" href=""> 
     Click 
     <span> 
      <font data-ng-click="click1();">All</font> 
      <font data-ng-click="click2();">UnAll </font> 
     </span> 
    </a> 
</th> 

Мой CSS является:

a:focus.tooltips span { 
    visibility:visible; 
    opacity:.8; 
    top:26px; 
    left:100%; 
    margin-left:-65px; 
    z-index:999 
} 

Мой сценарий:

$scope.click1 = function() { 
    alert("click1"); 
}; 
$scope.click2 = function() { 
    alert("click2"); 
}; 

Моя проблема заключается в нг-кликах не выстрелил может любой помогите мне

+0

ошибки в консоли? –

+0

Ошибок в получении @ K.Toress – Siva

+1

'clcik2' vs' click2' ?? Также покажите область контроллера в разметке. Если методы вызывают вне контроллера, они не будут работать – charlietfl

ответ

1

Ple аза убедитесь, что вы объявили директиву контроллера в шаблоне HTML следующим образом:

index.html:

<html> 
<body ng-app="mymodule" > 
<a class="tooltips" href="" 
    data-ng-controller="clickController"> 
    Click 
    <span> 
     <font data-ng-click="click1();">All</font> 
     <font data-ng-click="click2();">UnAll </font> 
    </span> 
</a> 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script> 
<script src="app.js"></script> 
</body> 
</html> 

Кроме того, убедитесь, что вы правильно объявили контроллер в угловом модуле и вводили $ объем следующим образом:

app.js:

var myModule = angular.module('mymodule',[]); 

myModule.controller('clickController',['$scope', clickController]); 

function clickController($scope){ 

    $scope.click1 = function() { 
     alert("click1"); 
    }; 

    $scope.click2 = function() { 
     alert("click2"); 
    }; 
} 
+0

Привет @ Rémi Becheras, я использую то же самое ... но когда я нажимаю на элемент span из css, я написал «a: focus.tooltips span», о котором я упоминал выше. когда он будет активен в это время, все и UnAll покажут, что я пытаюсь запускать события, но он не стреляет – Siva

+0

Правила CSS не имеют значения в отношении угловых директив ng-click или рабочего процесса контроллера. Забудьте об этом и сделайте свой угловой код работоспособным. Затем работайте с вашим css. –

+0

что вы написали то же самое, что и я пытался, но он не работает @ Rémi Becheras – Siva

0

Вот полный пример кода.

Существует два способа написать ваши ссылки.

Обратите внимание, что Angular является фреймворком HTML5 и что тег <font></font> устарел в HTML5 и, возможно, раньше.

Первый способ предпочтительнее, и ng-click находится на теге. Его не требуется, но предпочтительнее в этом случае, если у вас есть тег <a>.

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
</head> 
<body ng-app="mymodule" > 


<div ng-controller="clickController">  
    <a class="tooltips" href=""   
     data-ng-click="click1()" 
     > 
     <span> 
      <font> 
       Click all 
      </font>   
     </span> 
    </a> 
    <br> 
    <a class="tooltips" href="" 
     data-ng-click="click2()" 
     > 
     <span>   
      <font> 
       Click UnAll 
      </font> 
     </span> 
    </a>  
</div> 

<br><br> 
----------------- 
<br><br> 

<a class="tooltips" href="" 
    data-ng-controller="clickController"> 
    Click 
    <span> 
     <font data-ng-click="click1();">All</font> 
     <font data-ng-click="click2();">UnAll </font> 
    </span> 
</a> 


<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script> 
<script type="text/javascript"> 

    var myModule = angular.module('mymodule',[]); 

    myModule.controller('clickController',['$scope', clickController]); 

    function clickController($scope){ 

     $scope.click1 = function() { 
      alert("click1"); 
     }; 

     $scope.click2 = function() { 
      alert("click2"); 
     }; 
    } 


</script> 
</body> 
</html>