javascript - 通过指令更新范围。最佳实践

Question

在使用指令时，我正在努力解决范围的概念。我通读了官方 文档以及六个博客和资料，但我无法完成这项工作。

我有 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