Question

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

查看实时代码： JSFiddle

我创建了一个anchor和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>';

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

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

1 个答案: