編譯動態指令

Question

假設我指令「測試」，其具有分離的範圍作爲scope:{data:=} 和我另一個指令有鏈路功能爲以下

link : function (scope,ele,att){ 
var testData = {bla:123}; 
var a = $compile(<test data = testData></test>)(scope) 

} 

所以，問題是如何傳遞TESTDATA對象測試指令

Answer 1

編譯元素需要你這樣傳遞範圍添加到父範圍，你需要孩子的指令中的數據：

scope.data = toFoo 
element.append($compile("<foo data='data' />")(scope)) 

看看例子

angular.module('myApp', []) 
 
    .directive('bar', 
 
    function($compile) { 
 
     return { 
 
     restrict: 'A', 
 
     link: function(scope, element, attrs) { 
 
      var toFoo = { 
 
      s: 'ome', 
 
      d: 'ata' 
 
      } 
 
      scope.data = toFoo 
 
      element.append($compile("<foo data='data' />")(scope)); 
 
     } 
 
     }; 
 
    } 
 
) 
 
    .directive('foo', 
 
    function() { 
 
     return { 
 
     restrict: 'E', 
 
     scope: { 
 
      data: '=' 
 
     }, 
 
     replace: true, 
 
     template: "<div class='in'></div>", 
 
     link: function(scope, element, attrs) { 
 
      element.append(JSON.stringify(scope.data)) 
 
     } 
 
     }; 
 
    } 
 
);

.out { 
 
    height: 100px; 
 
    width: 200px; 
 
    z-index: 1; 
 
    background-color: #ddd; 
 
    position: relative; 
 
} 
 
.in { 
 
    height: 50px; 
 
    width: 150px; 
 
    z-index: 2; 
 
    background-color: #333; 
 
    position: absolute; 
 
    margin: auto; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp"> 
 
    <div class="out" bar></div> 
 
</div>