Javascript 将指令分配给HTML元素后编译

Javascript 将指令分配给HTML元素后编译,javascript,jquery,angularjs,Javascript,Jquery,Angularjs,我试图通过jQuery.attr()向特定事件的HTML元素添加指令。此指令在添加后不起作用 angular.module("myApp", []) .directive("myDirective", function() { restrict: "A", link: function () { alert("Hello"); } }); 当我在html中直接使用它时,效果很好: <div id="m

我试图通过jQuery
.attr()
向特定事件的HTML元素添加指令。此指令在添加后不起作用

angular.module("myApp", [])
    .directive("myDirective", function() {
        restrict: "A",
        link: function () {
            alert("Hello");
        }
    });
当我在html中直接使用它时,效果很好:

<div id="myDiv" my-directive></div>
它没有任何作用


在这种情况下,如何向HTML元素添加指令?

试试这个。您需要使用
$compile

$("#myDiv").attr("my-directive", "");
$("#myDiv").html($compile($("#myDiv").html())($scope));
 ̶$̶s̶c̶o̶p̶e̶.̶$̶a̶p̶p̶l̶y̶(̶)̶;̶
但是使用
$
获取元素并不是一个好的解决方案<代码>$非常珍贵。因此,将元素存储在一个变量中,以避免每次都获取

var element = $("#myDiv");
element.attr("my-directive", "");
element.html($compile(element.html())($scope));
 ̶$̶s̶c̶o̶p̶e̶.̶$̶a̶p̶p̶l̶y̶(̶)̶;̶

试试这个。您需要使用
$compile

$("#myDiv").attr("my-directive", "");
$("#myDiv").html($compile($("#myDiv").html())($scope));
 ̶$̶s̶c̶o̶p̶e̶.̶$̶a̶p̶p̶l̶y̶(̶)̶;̶
但是使用
$
获取元素并不是一个好的解决方案<代码>$非常珍贵。因此,将元素存储在一个变量中,以避免每次都获取

var element = $("#myDiv");
element.attr("my-directive", "");
element.html($compile(element.html())($scope));
 ̶$̶s̶c̶o̶p̶e̶.̶$̶a̶p̶p̶l̶y̶(̶)̶;̶

当您在执行所有编译时动态添加它时,您需要重新编译它以应用该指令

$("#myDiv").attr("my-directive", "");
var elem = $("#myDiv");
$compile(elem )($scope);
$̶s̶c̶o̶p̶e̶.̶$̶a̶p̶p̶l̶y̶(̶)̶;̶

在控制器中注入$compile。编译工作是对j查询元素(即非角度上下文的非角度上下文的非角度上下文的非角度上下文的非角度上下文)上的j查询元素进行的,编译工作是对j查询元素(即非角度上下文的非角度上下文的非角度上下文的非角度上下文的非角度上下文)上的j查询元素做的,编译工作是对j查询元素(即非角度上下文的非角度上下文的非角度上下文的非角度上下文)进行的,以及对,y y y y 82828222; y,y,y,y?o,o,o,o,o,o,o,o,o,o,o,o,y,y,y,y,y,y,y,y,y,y,y,y,y,y,y,y,y,y,y,y,y,y,y,y,y,o,y,o,o,o,o,o,y,y \8282经经经经经经经经——)——;——

当执行所有编译时动态添加它时,需要重新编译它才能应用指令

$("#myDiv").attr("my-directive", "");
var elem = $("#myDiv");
$compile(elem )($scope);
$̶s̶c̶o̶p̶e̶.̶$̶a̶p̶p̶l̶y̶(̶)̶;̶

在控制器中注入$compile。编译工作是对j查询元素(即非角度上下文的非角度上下文的非角度上下文的非角度上下文的非角度上下文)上的j查询元素进行的,编译工作是对j查询元素(即非角度上下文的非角度上下文的非角度上下文的非角度上下文的非角度上下文)上的j查询元素做的,编译工作是对j查询元素(即非角度上下文的非角度上下文的非角度上下文的非角度上下文)进行的,以及对,y y y y 82828222; y,y,y,y?o,o,o,o,o,o,o,o,o,o,o,o,y,y,y,y,y,y,y,y,y,y,y,y,y,y,y,y,y,y,y,y,y,y,y,y,y,o,y,o,o,o,o,o,y,y \8282经经经经经经经经——)——;——

是的,我忘了提到它,它与您的解决方案配合使用,实际上没有
$scope.$apply()。当我使用
$scope.$apply()时,它抛出一个错误:
错误:[$rootScope:inprog]$digest已在Scope中进行。$apply
@georgeawg,您能否解释一下为什么不需要$Scope.$apply(),因为jquery代码是非角度上下文。AngularJS通过提供自己的事件处理循环来修改正常的JavaScript流。这将JavaScript分为经典和AngularJS执行上下文。由于代码是在AngularJS执行上下文中执行的,因此不需要使用
$apply
。在任何时间点,只能有一个
$digest
$apply
操作正在进行。它可以防止很难检测的bug进入应用程序。是的,我忘了提到它在没有
$scope.$apply()。当我使用
$scope.$apply()时,它抛出一个错误:
错误:[$rootScope:inprog]$digest已在Scope中进行。$apply
@georgeawg,您能否解释一下为什么不需要$Scope.$apply(),因为jquery代码是非角度上下文。AngularJS通过提供自己的事件处理循环来修改正常的JavaScript流。这将JavaScript分为经典和AngularJS执行上下文。由于代码是在AngularJS执行上下文中执行的,因此不需要使用
$apply
。在任何时间点,只能有一个
$digest
$apply
操作正在进行。防止很难检测到的bug进入应用程序。