AngularJS 1.xで動的にディレクティブを読み込むことができない

私は自分のビューを動的に変更する必要があるため、私は自分のオブジェクトとビューを変更するだけの方法が必要です。AngularJS 1.xで動的にディレクティブを読み込むことができない

私は次のように変数を使用して動的に指示をロードしようとしています：ここ

<body ng-app="myApp" ng-controller="myCtrl"> 
    <button ng-repeat="type in testDirectiveJson" ng-click="setDirective(type)">{{type}}</button> {{newDirective}} 
    <load-directive type="newDirective"></load-directive> 
    <script src="./test.directive.js"></script> 
</body>

は私のjs

var app = angular.module("myApp", []); 
app.controller('myCtrl', function($scope) { 
    $scope.testDirectiveJson = { 
     first: '1-directive', 
     sec: '2-directive', 
     third: '3-directive', 
    } 
    $scope.lastName = "Doe"; 
    $scope.newDirective = "" 
    $scope.setDirective = function(type) { 
     console.log(type); 
     $scope.newDirective = type; 
     $scope.$apply(); 
    } 
}).directive("loadDirective", function($compile) { 
    return { 
     scope: { 
      Dtype: '=type' 
     }, 
     link: function(scope, element) { 
      var generatedTemplate = '<div ' + scope.Dtype + 
       ' ></div>'; 
      element.append($compile(generatedTemplate)(scope)); 
     }, 
     restrict: 'E' 
    }; 
}).directive("1Directive", function() { 

    return { 
     restrict: 'A', 
     template: "<h1>Made by a directive A!</h1>" 
    }; 
}).directive("2Directive", function() { 
    return { 
     restrict: 'A', 
     template: "<h1>Made by a directive! B</h1>" 
    }; 
}).directive("3Directive", function() { 
    return { 
     restrict: 'A', 
     template: "<h1>Made by a directive! C</h1>" 
    }; 
});

期待通りのが動作していないです。

ディレクティブを直接渡すとうまくいきます。

出典

2016-12-08 Rhushikesh

をコンパイルしますか？ – Thierry

newDirective変数の$ watchを試しましたか？私はあなたがnewDirectiveの値が変更されたことを検出する必要がありますと思う。 –

隔離されたスコープDtypeの場合、$watchはhtmlを追加する必要があります。

link: function(scope, element, attrs) { 
      scope.$watch('Dtype', function(newVal) { 
       var generatedTemplate = '<div ' + scope.Dtype + 
        ' ></div>'; 
        element.html($compile(generatedTemplate)(scope)); 

      }); 
     }

また、あなたはそれ以外の場合はエラー$apply already in progressをスローします$scope.setDirective方法から$scope.$apply()を削除する必要がありますする必要があります。

作業はスニペット：

var app = angular.module("myApp", []); 
 
app.controller('myCtrl', function($scope) { 
 
    $scope.testDirectiveJson = { 
 
     first: '1-directive', 
 
     sec: '2-directive', 
 
     third: '3-directive', 
 
    } 
 
    $scope.lastName = "Doe"; 
 
    $scope.newDirective = "" 
 
    $scope.setDirective = function(type) { 
 
     console.log(type); 
 
     $scope.newDirective = type; 
 
    } 
 
}).directive("loadDirective", function($compile, $timeout) { 
 
    return { 
 
     scope: { 
 
      Dtype: '=type' 
 
     }, 
 
     link: function(scope, element, attrs) { 
 
      scope.$watch('Dtype', function(newVal) { 
 
       var generatedTemplate = '<div ' + scope.Dtype + 
 
        ' ></div>'; 
 
        element.html($compile(generatedTemplate)(scope)); 
 
       
 
      }); 
 
     }, 
 
     restrict: 'E' 
 
    }; 
 
}).directive("1Directive", function() { 
 

 
    return { 
 
     restrict: 'A', 
 
     template: "<h1>Made by a directive A!</h1>" 
 
    }; 
 
}).directive("2Directive", function() { 
 
    return { 
 
     restrict: 'A', 
 
     template: "<h1>Made by a directive! B</h1>" 
 
    }; 
 
}).directive("3Directive", function() { 
 
    return { 
 
     restrict: 'A', 
 
     template: "<h1>Made by a directive! C</h1>" 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<body ng-app="myApp" ng-controller="myCtrl"> 
 
    <button ng-repeat="type in testDirectiveJson" ng-click="setDirective(type)">{{type}}</button> {{newDirective}} 
 
    <load-directive type="newDirective"></load-directive> 
 
    <!--<script src="./test.directive.js"></script>--> 
 
</body>

出典

2016-12-08 09:28:34 Aruna

うまく動作していますが、複数回追加しています – Rhushikesh

ただ1つだけ表示したいだけです – Rhushikesh

上記の 'element.append'の代わりに' element.html'を使用することができます – Aruna

は、あなたがその要素を交換すると、変更のためのディレクティブ時計内部の各変更のクリックを参照してください。この

scope.$watch('Dtype', function() { 
    var generatedTemplate = '<div ' + scope.Dtype + ' ></div>';  
    element.html($compile(generatedTemplate)(scope)); 
});

のように再コンパイルするディレクティブが必要になりますので、必要ならば代わりにAPPENDのHTMLを使用する必要があります

出典

2016-12-08 09:23:52

リンク動的にDOMを変更するには遅すぎるディレクティブロード処理です。コンパイル前の段階で変更を加える必要があります。

は、ここでディレクティブのコンパイルに角度のドキュメントを参照してください：あなたは説明することができます：https://docs.angularjs.org/api/ng/service/ $「はその期待通りに動作していない」

出典

2016-12-08 09:30:19 s3raph86

AngularJS 1.xで動的にディレクティブを読み込むことができない

答えて

関連する問題