0

我尝试在 angularjs 指令 html 模板中执行一些 jquery 代码。但是，该代码处于非活动状态。

在下面的代码中，都没有调用alert("testA");or 。alert("testB");

我想知道我正在做的错误是在里面定义jquery调用$(document).ready(function() { /*...*/ }

这是我做错了吗？我应该改变什么？

索引.html

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

<span id="testA">testA</span>
<directivecontrol></directivecontrol>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script>
<script src="js/app.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</body>
</html>

js/app.js

var app = angular.module('myapp',[]);

app.directive('directivecontrol', function()
{
    return    {
        restrict: "E",
        templateUrl:  "partials/directive_control.html"
    };
});

部分/directive_control.html

<span id="testB">testB</span>
<script src="js/directive_control.js"></script>

js/directive_control.js

$(document).ready(function()
{
    $("#testB").click(function()
    {
        alert("testB");
    });

    $("#testA").click(function()
    {
        alert("testA");
    });
}

我在 ubuntu 13.04 下使用 Chrome 版本 31.0.1650.8 beta。使用 angularjs 1.2.0-rc.2 和 jquery 1.10.2

4

1 回答 1

2

在加载该脚本之前， 'ready'on 事件document已经被触发js/directive_control.js，因此您传递给的回调中的任何代码都$(document).ready不会被执行。但是这种架构首先不适用于 Angular。您应该考虑将这些点击处理程序重构为您的指令的链接函数。

于 2013-10-11T20:02:48.130 回答