無法從指令中的模板編譯ng-repeat

我正在嘗試使用JS動態添加表單元素，並且需要一個指令。我能夠添加表單元素，但是當我有ng-options或ng-repeat時，它不會被編譯。我有一個用於演示的示例指令。無法從指令中的模板編譯ng-repeat

http://plnkr.co/edit/JOzTWB6tuyilCJ8Rj37Q

<!DOCTYPE html> 
<html ng-app="myApp"> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script> 
<script> 
     var app = angular.module('myApp', []); 
     app.controller("fCtrl",function($scope){ 
     $scope.xx = ['x','c','y','z','a']; 

     }); 

     app.directive('datanType', function ($compile) { 

       var testTemplate1 = '<h1 ng-repeat="x in xx">Test</h1>'; 
       var testTemplate2 = '<h1>Test2</h1>'; 
       var testTemplate3 = '<h1>Test3</h1>'; 

       var getTemplate = function(contentType){ 
        var template = ''; 

        switch(contentType){ 
         case 'test1': 
          template = testTemplate1; 
          break; 
         case 'test2': 
          template = testTemplate2; 
          break; 
         case 'test3': 
          template = testTemplate3; 
          break; 
        } 

        return template; 
       }; 

       var linker = function(scope, element, attrs){ 
       element.html(getTemplate(attrs.content)); 
       $compile(element.contents())(scope); 

       }; 

       return { 
        restrict: "E", 
        replace: true, 
        link: linker, 
        scope: { 
         content:'=', 
         con:'@' 
        } 
       }; 
     }); 
</script> 
    <meta charset="utf-8"> 
    <title>JS Bin</title> 
</head> 
<body ng-controller="fCtrl"> 
    <p>Result:</p> 
    <datan-type content="test1" con="{{xx}}"></datan-type> 
</body> 
</html>

來源

2016-07-29 Gary

而不是使用真正的'switch'使用'ng-switch'。 –

你可以告訴我那在闖入者嗎？它是在控制器還是指令中。我基本上想要ng-repeat工作 – Gary

試試這個方法，它的工作http://plnkr.co/edit/NTG0LBa1dIPWcGGupJgt?p=preview

<!DOCTYPE html> 
 
<html ng-app="myApp"> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script> 
 
<script> 
 
     var app = angular.module('myApp', []); 
 
     app.controller("fCtrl",function($scope){ 
 
     $scope.xx = ['x','c','y','z','a']; 
 
     
 
     }); 
 
     
 
     app.directive('datanType', function ($compile) { 
 
    return { 
 
    restrict: 'E', 
 
    replace: true, 
 
    link: function (scope, ele, attrs) { 
 
     var testTemplate1 = '<h1 ng-repeat="x in arr">Test</h1>'; 
 
     var testTemplate2 = '<h1>Test2</h1>'; 
 
     var testTemplate3 = '<h1>Test3</h1>'; 
 
     var template = ''; 
 
     scope.arr = eval(attrs.con); 
 
     switch(attrs.content){ 
 
      case 'test1': 
 
       template = testTemplate1; 
 
       break; 
 
      case 'test2': 
 
       template = testTemplate2; 
 
       break; 
 
      case 'test3': 
 
       template = testTemplate3; 
 
       break; 
 
     } 
 
     
 
     ele.html(template); 
 
     $compile(ele.contents())(scope); 
 
     
 
    } 
 
    }; 
 
}); 
 

 
     
 
     
 
</script> 
 
    <meta charset="utf-8"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body ng-controller="fCtrl"> 
 
    <p>Result:</p> 
 
    <datan-type content="test1" con="{{xx}}"></datan-type> 
 
</body> 
 
</html>

來源

2016-07-29 11:35:07

你可以檢查這個。我試圖添加元素，它仍然顯示未編譯。 http://plnkr.co/edit/BFPxAvEahT1I930mvB5r – Gary

@Gary，我用另一個plunker更新了你的最新代碼，使用add按鈕，現在檢查，http://plnkr.co/edit/NTG0LBa1dIPWcGGupJgt?p=preview –

這應該工作。以下是我所做的更改：

con已被綁定到範圍。沒有必要使用ATTRS

var testTemplate1 = '<h1 ng-repeat="x in con">Test {{x}}</h1>';

更改@爲=到範圍屬性來父範圍（@邊界作爲字符串結合，參見this

scope: { 
     content: '=', 
     con: '=' 
     }

更改{{XX}}到xx

<datan-type content="test1" con="xx"></datan-type>

Working plunker http://plnkr.co/edit/P54mZhXWE7AnjfCWbQRb

來源

2016-07-29 12:04:19 doge1ord

請看看這個。我試圖動態地添加內容，並且指令中的數據沒有被添加。 http://plnkr.co/edit/BFPxAvEahT1I930mvB5r – Gary

無法從指令中的模板編譯ng-repeat

回答

相關問題