Question

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

在下面的代码中，alert("testA");或alert("testB");均未被调用。

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

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

的index.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

Answer 1

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

在angularjs指令templateUrl中执行jquery代码

1 个答案: