0

angularjs ディレクティブ HTML テンプレート内でいくつかの jquery コードを実行しようとしています。ただし、コードは非アクティブです。

以下のコードでは、alert("testA");orはどちらalert("testB");も呼び出されません。

私がやっている間違いは、内部でjquery呼び出しを定義することなのだろうか$(document).ready(function() { /*...*/ }

これは私が間違っていることですか？何を変更すればよいですか？

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

partials/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ベータを使用しています。angularjs 1.2.0-rc.2 および jquery 1.10.2 を使用

4

1 に答える 1

2

onの'ready'イベントは、documentそのスクリプトがロードされるかなり前にすでに発生しているjs/directive_control.jsため、渡したコールバック内のコードは$(document).ready実行されません。しかし、この種のアーキテクチャはそもそも Angular ではうまく機能しません。これらのクリック ハンドラーをディレクティブのリンク関数にリファクタリングすることを検討する必要があります。

于 2013-10-11T20:02:48.130 に答える