0

私は一般的なディレクティブを持っています

  • ジェネリック ディレクティブ

別の特定のディレクティブを選択することになっている

  • type1 ディレクティブobj.type == "type1"
  • type2 ディレクティブ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>

これらが実際のディレクティブに置き換えられない理由は何ですか?

4

2 に答える 2

2

でを使用することreturnによりgenericDirective:

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

関数を返していlinkます。リンク フェーズは、コンパイル フェーズの後に発生します。したがって、このテンプレートを解決するまでに、angular は子ディレクティブを「コンパイル」してリンクすることができません。

angularが考慮するhtmlを変更するには、コンパイル関数を定義し、その時点でディレクティブを設定する必要があります。をリンクする前に html を操作する必要があるときはいつでも$scope、おそらくコンパイル段階で変更を加えたいと思うでしょう。

コンパイルとリンクの詳細については、こちらのドキュメントを参照してください。「コンパイル プロセスとディレクティブの一致」というタイトルのセクションは非常に役に立ちます。

于 2013-10-02T08:33:16.213 に答える
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);
        }
     };
});
于 2013-10-02T09:00:02.943 に答える