Question

我正在使用angular指令来创建一个复杂的形式。

<div class="row">

     <div class="col-xs-4">
        <span></span>
     </div>

    <div class="col-xs-8" ng-controller="newOrdercontroller" >
        <form class="form-horizontal" ng-submit="checkvalues(order)">
            <div id="items-container">
                <new-generic-item item-type="ecommerce" deletable="false" item-id="1"></new-generic-item>
            </div>
            <button class="btn btn-primary" ng-click="addElement($event)">Add Item</button>
            <button class="btn" type="submit" ></button>
        </form>

    </div>
</div>

显然，new-generic-item是我正在使用的指令。该指令创建了多个表单元素。

    .directive("newGenericItem", function() {
    return {
        restrict: 'E',
        templateUrl: 'static/js/directives/genericItem.html',
        controller: function($scope, $element, $attrs){
            var itemType = $attrs['itemType'];
            var itemId = $attrs['itemId'];
            var deletable = $attrs['deletabe'];

            $scope.items = $scope.itemTypes[itemType];

        },
        scope:true
    }
})

这会产生以下形式。 enter image description here

所以使用Add Item按钮我设法添加了多个指令。

enter image description here

这就是我在我的指令工厂中使用scope:true的原因。

问题在于使用不同的范围。我很难提交表格。访问此表单的所有值的最简单方法是什么。

我已经找到了简单的解决方案，其中in指令用于创建单个简单的表单元素。（http://jsfiddle.net/revolunet/9e7Hy/）

我的情况不同，因为它涉及多个表单元素。

如果控制器代码很有用

.controller('newOrdercontroller', function($scope, $compile,  itemTypes){
        $scope.itemTypes = itemTypes;
        $scope.addElement = function(event){
            var element = angular.element(document.querySelector("#items-container"));
            element.append($compile('<new-generic-item item-type="ecommerce"></new-generic-item>')($scope));
        }

        $scope.checkvalues = function(order){
            console.log($scope);

        }
    });

Answer 1

使用事件：

示例...子范围：

$scope.$emit('runApplication', parameters);

在你的一个祖先范围内（肯定不是你的父母）实际上我不知道par2中的内容，也许是指令触发事件的范围。它仍然是一些测试代码：）

$scope.$on('runApplication', function(par2, parameters) {

});

Answer 2

当你可以避免使用时，不要直接操纵DOM。
你有几个属性，为什么不将它们放入对象中。
如果您使用隔离范围 - 正确访问变量，则不抛出属性（默认情况下不提供u绑定）。所以最后：

<new-generic-item ng-repeat="item in items" item="item"></new-generic-item>
<button ng-click="addNewItem()">Add</button>

： $ scope.items = [{type：...，id：...}]; $ scope.addNewItem = function（）{ $ scope.items.push（{new object}）; } 在指令中：

scope: { item : '='}

只需在模板中使用'item'，例如

<input ng-model="item.type">

然后在提交中，您将所有数据都放在数组中，并且可以轻松地执行任何操作。

如何轻松地与父范围沟通

2 个答案: