嵌套指令未按预期工作

Question

我有一个通用指令

• 通用指令

应该选择另一个特定的指令

• type1 指令 if obj.type == "type1"
• type2 指令 if obj.type == "type2"

HTML

<div ng-controller="MainCtrl">
    <div class="genericdirective" ng-repeat="obj in someArray"></div>
</div>

Javascript

var app = angular.module("myApp", []);

app.controller("MainCtrl", function ($scope) {
    $scope.someArray = [
        {type:"type1",title:"lorem"},
        {type:"type2",title:"ipsum"},
        {type:"type2",title:"dolor"}
    ];
});
app.directive("genericdirective", function(){
    return{
        restrict: "C",
        template: "<div class='{{obj.type}}'>genericdirective</div>"
    };
});
app.directive("type1", function(){
    return{
        restrict: "C",
        template: "<div>type1</div>"
    };
});
app.directive("type2", function(){
    return{
        restrict: "C",
        template: "<div>type2</div>",
    };
});

输出 HTML

<div class="genericdirective ng-scope" ng-repeat="obj in someArray">
    <!-- Not replaced by the actual directive -->
    <div class="type1">genericdirective</div>
</div>
<div class="genericdirective ng-scope" ng-repeat="obj in someArray">
    <!-- Not replaced by the actual directive -->
    <div class="type2">genericdirective</div>
</div>
<div class="genericdirective ng-scope" ng-repeat="obj in someArray">
    <!-- Not replaced by the actual directive -->
    <div class="type2">genericdirective</div>
</div>

知道为什么这些不被实际指令替换吗？

Answer 1

通过在您的genericDirective 中使用return：

app.directive("genericdirective", function(){
    return{
        restrict: "C",
        template: "<div class='{{obj.type}}'>genericdirective</div>"
    };
});

您正在返回 link 函数。链接阶段发生在编译阶段之后。因此，当您解析此模板时，angular 无法“编译”您的子指令然后链接它们。

你需要定义一个编译函数并在那个时候设置指令，以便修改angular会考虑的html。任何时候您需要在链接$scope 之前操作 html，您可能希望在编译阶段进行更改。

要了解有关编译和链接的更多信息，请参阅docs here。标题为“编译过程和指令匹配”的部分非常有帮助。

Answer 2

基于 Davin 的回答，如果您将指令更改为此它应该可以工作：

app.directive("genericdirective", function($compile){
    return{
        restrict: "C",
        link: function (scope, element, attrs) {
           element.append('<div class="' + scope.obj.type + '">genericdirective</div>');
           $compile(element.contents())(scope);
        }
     };
});