AngularJS

Question

是否可以嵌入作为属性传递的嵌套 AngularJS 指令的内容？

这是HTML

<div ng-controller="DemoCtrl">
  Hello test.
  <my-directive special/>
</div>

和指令：

var myApp = angular.module('myApp', []);
myApp.controller('DemoCtrl',['$scope', function($scope){

}])
.directive('myDirective', function(){
    return {
        restrict: 'E',
        replace: true,
        scope: {},
        transclude: true,
        template: "<div>Hello, <div ng-transclude></div></div>"
    }

}).directive('special', function(){
    return {
        restrict: 'A',
        template: '<div>Special</div>'

    };

}).directive('special2', function(){
    return {
        restrict: 'A',
        template: '<div>Special2</div>'

    };

});

这是 jsfiddle link https://jsfiddle.net/c8gscx3t/2/

基本上，我想要一个父指令和两个子指令，它们可以通过属性更改父指令的内容。这样我就可以把 myDirective 放在页面上，通过属性控制它是否是 special2 的特殊。

Angular 这里是菜鸟，请随时提出更好的方法。

Answer 1

你不能在同一个标签中有两个带有模板的指令，试试这个：

<div ng-controller="DemoCtrl">
  <my-directive>
    <special></special>
  </my-directive>
</div>

var myApp = angular.module('myApp', []);
myApp.controller('DemoCtrl',['$scope', function($scope){

}])
.directive('myDirective', function(){
    return {
        restrict: 'E',
        replace: true,
        scope: {},
        transclude: true,
        template: "<div>Hello <div ng-transclude></div></div>"
    }

}).directive('special', function(){
    return {
        restrict: 'AE',
        template: '<div>Special</div>'

    };

}).directive('special2', function(){
    return {
        restrict: 'A',
        template: '<div>Special2</div>'

    };

});

https://jsfiddle.net/c8gscx3t/3/

AngularJS - 嵌入嵌套属性指令的内容

AngularJS - Transclude content of nested attribute directive

javascript

angular-directive