如何复制具有隔离范围的指令

Question

如何将输入的文本从我的指令推送到ng-submit 上的$scope.output = []？

查看实时代码： JSFiddle

我创建了一个锚点和 attr 指令<a href="" data-clicker>add section</a>，它在表单内附加了一个具有隔离范围的输入字段。

指令：

app.directive('clicker', function($compile) {
    'use strict';

    return {
        compile: function(tElement, tAttrs) {
            var t = '<div data-pop>Pop</div>';

            return function(scope, iElement) {
                iElement.click(function() {
                    $('.sections').append($compile(t)(scope));
                });
            };
        }
    }
});

app.directive('pop', function() {
    'use strict';

    return {
        scope: {
            name: '='
        },
        template: '<input type="text" ng-model="project.name" />'
//        templateUrl: 'partials/pop.html'
    };
});

当我尝试提交表单时，数据未正确推送。

html

<div ng-app="miniapp" ng-controller="MainCtrl">
     <a href="" data-clicker>add section</a>
    <form ng-model="project" ng-submit="addPage()">
        <div class="sections"></div>  

        <input type="submit" value="submit"/>
    </form>

    <hr>
    <hr>
    <p>project: {{project.name | json}}</p> 
    <p>output: {{output | json}}</p> 
</div>

控制器

app.controller('MainCtrl', function($scope) {
    $scope.project = {"name":"sup"};
    $scope.output = [];
   $scope.addPage = function() {
     $scope.output.push($scope.project);     
   };

Answer 1

我已经更新了您的小提琴：http://jsfiddle.net/89AYX/31/，并且只是将您的内部指令移动到您的外部指令所在的位置，并且它看起来可以按预期工作。

var t = '<div><input type="text" ng-model="project.name"></div>';

问题似乎是您没有编译内部输入指令。