Question

我正在开发我的第一个单页Angular.js应用程序，并且在编程上编译/评估自定义指令，以便从控制器中将其插入DOM中。我创建的自定义指令使用两个值（返回函数并获取参数）和参数。整个事情在SPA的初始html中使用ng-repeat工作正常：

<div>
    <img ng-src="{{ param.img.src }}" />
    <div>
        <a href="{{ param.link.src }}">{{ param.link.text }}</a>
        <time datetime="{{ v1 }}">{{ v2 | date: 'medium' }}</time>
        <span ng-bind-html="param.text | customFilter1 | customFilter2 | customFilter3"></span>
    </div>
</div>

指令模板看起来像这样：

<ul ng-controller="SomeController" ng-cloak>
    <li ng-repeat="param in params">
        <my-directive param="param"></my-directive>
    </li>
</ul>

当我在页面html中使用此指令时，一切都很顺利：

$compile

我现在想重用该指令，以便在控制器内的函数中以编程方式动态生成相应的html。我的方法试图使用// in controller: // ... $scope.generateMyDirective = function(param){ var compiled = $compile('<my-directive param="param"></my-directive>')({}); someElement.innerHTML = compiled[0]; };函数，但没有成功：

someElement

结果（即{{ param.img.src }}）确实包含指令的静态html，但不会评估指令中的任何表达式，例如{{ v1 }}或TypeError: scope.$new is not a function。此外，抛出以下类型错误：

$scope

我尝试使用不同的范围进行编译，例如控制器的true或简单$scope.$apply()生成一个新范围，但没有人会评估指令模板中的表达式。在将指令html插入someElement之后，我也试图调用{{1}}，这也不起作用。

我有点被困在这一点上，出于想法并感谢任何提示。我希望你们能帮助我解决这个问题。

Answer 1

你犯了错误的第一件事就是指令不正确。骆驼的情况应该Prelude> map (`div` 2) [2,4,6,8] [1,2,3,4]与小写的所有字母分开

应该是

而不是

<my-directive param="param"></my-directive>

同样<myDirective param="param"></myDirective>应该用范围编译元素，你不必担心从控制器创建新的$compile，你的指令已经有一个孤立的范围。

scope

Answer 2

您应该为指令编译器提供任何范围
所有使用的变量（请参阅下面的p）应该在提供的范围内可解析

$scope.p = {img: '', ...};  
$compile('<my-directive param="p"></my-directive>')($scope);
delete $scope.p;

Answer 3

我能够在@vp_rath和@pankajparkar的帮助下解决这个问题！问题确实在于$scope。为了将param传递给$compile()，我们有两种可能的选择。一种解决方案是将param绑定到控制器的范围并添加$watch()。执行此操作的第二种方式（以及我正在寻找的更多内容）是：不是绑定到控制器$scope，而是创建一个新的，类似于vanilla的范围：

// controller:
//
var generateMyDirection = function(param){
    var scope = $rootScope.$new();
    scope.param = param;
    var compiled = $compile('<my-directive param="param"></my-directive>')(scope);
    someElement.innerHTML = compiled[0];
};

AngularJS：以编程方式重用自定义指令

3 个答案: