Question

在使用指令时，我正在努力使用范围的概念。我通读了offical docs以及六个博客和内容，但我无法完成这项工作。

我有5个字段用于文本输入。我想要实现的是，如果一个字段被填满，下一个兄弟会出现：

<table>
    <tr ng-repeat="entry in activeField.entries">
        <td entry-value contenteditable="">{{entry.value_0}}</td>
        <td entry-value contenteditable="" ng-show="entry.value_0">{{entry.value_1}}</td>
        <td entry-value contenteditable="" ng-show="entry.value_1">{{entry.value_2}}</td>
        <td entry-value contenteditable="" ng-show="entry.value_2">{{entry.value_3}}</td>
        <td entry-value contenteditable="" ng-show="entry.value_3">{{entry.value_4}}</td>
    </tr>
</table>

这是我的指示entryValue

terminal.directive('entryValue',function(){
return{
    restrict: 'A',
    controller: 'terminalController',
    link: function(scope, element){

        element.bind('input',function(){              
            // Here i want to update the scope
        })
    }
  }
});

当用户输入时，我想将该值推送到我的控制器范围，该范围包含对象activeField。我试图将$ watch绑定到我的指令链接函数以及scope.$apply()但是都不起作用。

我很感激任何帮助

Answer 1

<tr ng-repeat="entry in activeField.entries">
    <td entry-value contenteditable="" 
     ng-hide="!$first && !activeField.entries[$index-1].value">{{entry.value}}</td>
</tr>

app.directive('entryValue',function(){
return{
    replace: true,
    controller: 'terminalController',
    template: '<div><input ng-model="entry.value"></div>',
    link: function(scope, element){
    }
  }
});

$scope.activeField = {entries: 
  [ {value: ''}, {value: ''}, {value: ''}, {value: ''}, {value: ''} ] };

fiddle

通过指令更新范围。最佳做法

1 个答案: