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>

问题是这两个指令都需要隔离的范围，而你不能拥有它（你也不能拥有多个需要模板的指令）。如果您在开发工具中打开控制台，您将看到：

错误：[$ compile：multidir]多个指令[container，myDirOne] 要求新的/隔离范围： http://errors.angularjs.org/1.2.1/ $编译/ multidir P0 =容器＆安培; P1 = myDirOn ... 2Fisolated％20scope＆安培; P3 =％3Cdiv％20my-DIR酮％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

另一个指令的模板中的指令

1 个答案: