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链接https://jsfiddle.net/c8gscx3t/2/

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

Angular noob在这里，所以请随意提出更好的方法。

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 - 转换嵌套属性指令的内容

1 个答案: