输入+ ng-model =魔术的指令模板?

时间:2013-07-24 20:00:07

标签: javascript angularjs directive

我很沮丧,并且因为制定得不好的问题而提前道歉。

我为简单的列表编辑创建了derictive:

angular.module('myApp').
    directive('variableList', function () {
        return {
            restrict: 'AE',
            templateUrl: 'variableList.html',
            replace: true,
            scope: {
                value: '='
            },
            controller: [
                '$scope', '$element', '$attrs', '$transclude',
                function($scope) {
                    $scope.removeListItem = function (index) {
                        $scope.value.splice(index, 1);
                    };
                    $scope.addListItem = function () {
                        $scope.value.push($scope.nextListItem);
                        $scope.nextListItem = null;
                    };
                }
            ]
        };
    });

和模板

<div class="variable-list">
    <div class="variable-list-items">
        <div class="row collapse variable-list-item" ng-repeat="(index, val) in value">
            <div class="small-11 columns variable-list-item-value">
                <input type="text" ng-model="val" />
            </div>
            <div class="small-1 columns">
                <button class="button alert prefix no-margin icon-minus"
                        ng-click="removeListItem(index)"></button>
            </div>
        </div>
    </div>
    <div class="row collapse variable-list-controls">
        <div class="small-11 columns">
            <input type="text" ng-model="nextListItem" />
        </div>
        <div class="small-1 columns">
            <button ng-class="{disabled: !nextListItem}"
                    ng-click="addListItem()"
                    class="button success prefix no-margin icon-plus"></button>
        </div>
    </div>
</div>

模板的重要部分

<input type="text" ng-model="val" />

最后,我有很好的工作 enter image description here

但是对于存在项目的输入不起作用!当我尝试编辑它们时没有任何事情发生。新项目的输入,添加和删除按钮按预期工作。

有什么想法吗?

修改 我试图像这样绑定模型

<input type="text" ng-model="value[key]" />

我能够编辑输入,但在第一次按键输入失去焦点后,它会引起更多魔法。

1 个答案:

答案 0 :(得分:0)

在这里找到答案https://github.com/angular/angular.js/issues/1267

  

基本上你必须有一个。在ng-model中或反转数据绑定不适用于基元。