Angular js Вложение пользовательских директив

Я хочу использовать что-то вроде вложенности с пользовательскими директивами в angular js. Может ли кто-нибудь объяснить мне простым решением?

Пример кода ниже не работает для меня:

<outer>
    <inner></inner>
</outer>

var app = angular.module('app',[]);
app.directive('outer',function(){
    return{
        restrict:'E',
        template:'<div><h1>i am a outer</h1></div>',
        compile : function(elem,attr){
            return function(scope,elem,att,outercontrol){
                outercontrol.addItem(1);
            }
        },
        controller : function($scope){
            this.addItem = function(val){
                console.log(val);
            }
        }
    }
});

app.directive('inner',function(){
    return{
        require : 'outer',
        template : '<div><h1>i am a inner</h1></div>',
        link:function(scope,elem,attr){

        }
    }
});

Ответ 1

Сначала добавьте restrict:'E' к внутреннему контроллеру, чтобы сделать его доступным как элемент.

Затем измените require : 'outer' на require : '^outer',, чтобы включить поиск этой директивы в родителях.

Затем вам нужно использовать transclude, чтобы включить просмотр содержимого <outer>, выполнив следующие шаги:

добавить transclude = true во внешнюю директиву.
определить, где вы хотите, чтобы внутренние данные просматривались. (Я думаю, вам нужно, чтобы он появился после строки "Я внешняя", поэтому вы можете изменить шаблон внешнего, чтобы он выглядел как template:'<div><h1>i am a outer</h1><div ng-transclude></div></div>').

Тогда вам вообще не нужен параметр компиляции. Поскольку эта переменная, которая называется externalcontrol, не будет вызываться во внешней директиве, но во внутренней директиве, поэтому нет никакой необходимости компиляции для внешней директивы, и внутренняя функция ссылки будет изменена так:

link: function(scope, elem, attr, outercontrol){
    outercontrol.addItem(1);
}

после этой модификации окончательный код будет выглядеть следующим образом:

HTML:

<outer>
<inner></inner>
</outer>

js:

var app = angular.module("exampleApp",[]);
    app.directive('outer', function(){
        return{
            transclude:true,
            restrict:'E',
            template:'<div><h1>i am a outer</h1><div ng-transclude></div></div>',
            controller : function($scope){
                this.addItem = function(val){
                    console.log(val);
                }
            }
        }
    });

    app.directive('inner',function(){
        return{
            restrict:'E',
            require : '^outer',
            template : '<div><h1>i am a inner</h1></div>',
            link:function(scope,elem,attr,outercontrol){
                outercontrol.addItem(1);
            }
        }
    });

Ответ 2

Если вам нужно простое решение, проверьте этот plunkr:

http://plnkr.co/edit/vnNvxQ4eG6QcU77cRkUh?p=preview

// Code
var app = angular.module('app',[]);
app.directive('outer',function(){
    return {
        restrict:'E',
        template:'<div style="border-style:solid"><h1>hey</h1><inner></inner></div>',
    }
});

app.directive('inner',function(){
    return {
        restrict:'E',
        template:'<div style="border-style:solid"><h1>i am an inner</h1></div>',
    }
});

и html:

// Template
 <!DOCTYPE html>
<html>

  <head>
    <script data-require="[email protected]*" data-semver="1.3.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
    <script data-require="[email protected]*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>
<div ng-app="app">
  <outer></outer>
</div>
</html>

Проблема заключается в том, что вы привязываете тег к атрибуту шаблона директивы. Эта строка:

    template:'<div><h1>i am a outer</h1></div>',

Это.