2

私はAngular JSが初めてで、非常に単純な問題に苦しんでいます。

クラスxyzに追加すると、DOM 要素に青い背景を与えるディレクティブがあります。

また、 xyzクラスで新しい要素を追加するサード パーティの jQuery ライブラリもあります。問題は、jQuery ライブラリによって作成された新しい要素の背景が青色にならないことです。

var test = angular.module("Test", []);
test.directive("awesome", function () {
   return {
        replace: false,
        restrict: 'C',
        transclude: false,
        link: function (scope, element, attrs) {
            $(element).css("background", "blue");
        }
    }
});


function Ctrl($scope, $http, $timeout) {

}

//Third party jQuery plugin will add a span with the class "awesome"
$(document).ready(function(){
    $(".append").append('<span class="awesome">Success</span>');
});

jsFiddle リンクが添付されています。リンク

4

1 に答える 1

1

angular 以外で jQuery を使用することは避けてください。ただし、AngularJS には wrapper: がangular.element('jquery selector here');あり、elementリンク関数のパラメーターは既にディレクティブに一致する jquery [lite] 要素です。

まず、色を割り当てるディレクティブを持つことはやり過ぎです。これが単純化された例でない場合は、再検討することをお勧めします。第二に、あなたは正しい軌道に乗っています。$compileangular に新しいディレクティブを認識させるには、サービスを使用する必要があります。

リンク機能でawesome、要素を DOM に追加します。あなたはそれがディレクティブをトリガーすることを知っていますが、角度はそうではありません。あなたはそれをコンパイルします、今Angularは知っています。実例を見る

あなたのawesomeディレクティブはそのままです：

test.directive("awesome", function () {
return {
    replace: false,
    restrict: 'C',
    transclude: false,
    link: function (scope, element, attrs) {
        element.css("background", "blue");
    }
}
});

他のディレクティブが新しい​​ディレクティブをトリガーできる要素を追加する場合は、次のようにコンパイルします。

test.directive("whatever", function ($compile) {
return {
    replace: false,
    restrict: 'E',
    transclude: false,
    link: function (scope, element, attrs) {
        element.append('<span class="awesome">Awesome</span>'); 
        $compile(element.contents())(scope); // compile ONLY the contents or you'll enjoy an infinite loop in the browser.
    }
}
});

あなたが言及したjqueryライブラリのラッパーを書く必要があるでしょう。jquery プラグインと angularjs の統合に関するオンラインのリソースがいくつかあります。angular-bootstrap プロジェクトは一例です

于 2013-07-08T06:59:05.113 に答える