另一個指令模板中的指令

Question

我正在嘗試在另一個客戶指令的模板中添加一個自定義指令，但不顯示該模板。使用下面的代碼。我究竟做錯了什麼？

app.js

var app = angular.module('myApp', []);  
app.directive('container', function() {  
    return { 
     restrict: 'A', 
     scope: {}, 
     replace: true, 
     template: '<div my-dir-one></div>', 

     link: function (scope, elm) {   
     } 
    } 
}); 

app.directive('myDirOne', function() { 
    return { 
    restrict: 'A', 
    scope: {}, 
    replace: true, 
    template: '<div>This is directive one.</div>' 
    } 
}); 

HTML：

<div container></div> 

JS Fiddle link

Answer 1

既然你在容器中的指令有replace: true，最後的結果HTML將是：

<div container my-dir-one></div>

的問題是，這兩個指令的要求隔離範圍，你不能有（你也不能有需要的模板不止一個指令）。如果您在開發者工具打開控制檯，您將看到：

Error: [$compile:multidir] Multiple directives [container, myDirOne] asking for new/isolated scope on: http://errors.angularjs.org/1.2.1/ $compile/multidir?p0=container&p1=myDirOn…2Fisolated%20scope&p3=%3Cdiv%20my-dir-one%3D%22%22%20container%3D%22%22%3E

如果去掉容器指令的replace: true它將工作：

app.directive('container', function() { 

    return { 
     restrict: 'A', 
     scope: {}, 
     template: '<div my-dir-one></div>', 

     link: function (scope, elm) { 

     } 
    } 
}); 

Fiddle