ng-click不起作用的子元素

时间:2015-01-05 08:46:45

标签: jquery angularjs

我非常新的Angular js任何人都可以帮助我。

我的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");
};

我的问题是没有解雇的ng-click事件可以请任何人帮助我

2 个答案:

答案 0 :(得分:1)

请确保您已在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>

另外,请确保您已在角度模块中正确声明您的控制器并注入$ scope ,如下所示:

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");
    };
}

答案 1 :(得分:0)

这是一个完整的示例代码。

写链接有两种方法。

请注意,Angular是一个HTML5 javascript框架,<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>