使用属性而不是服务在指令之间共享数据

Question

我想创建一个指令，它本质上就像一个专门的输入字段。在一些逻辑和用户输入之后，“值”属性将填充一串以逗号分隔的时隙 (hh:mm)。

<time-slot value=""></time-slot>

变成

<time-slot value="01:00,02:00,03:00"></time-slot>

我想为任何人提供在“值”属性标记中放置范围引用的灵活性——无论何时更新属性值，范围引用也是如此。 （在下面的代码中，myModel.times 将在 MyController 范围内）。

<div ng-controller="MyController">
  <time-slot value="{{ myModel.times }}"></time-slot>
</div>

访问指令中的“值”属性没有问题。 但是，我还没有实现双向绑定——myModel.times 永远不会捕获更改的值，即使我在运行时检查元素时属性的内容已经更改。我正在使用 $attrs.$set 来更改 value 属性。

我不确定我是在概念上遗漏了什么，还是只是遗漏了一些额外的语法。为了保持这个指令的模块化和可共享性，我不想使用服务在控制器和指令之间共享数据，也不想使用级联范围。我认为如果 value 属性可以简单地由范围变量引用并根据需要使用，就像一个简单的输入标签一样，那将是最佳选择：

<input ng-model="model.someText"></input>

Answer 1

双向数据绑定示例：参见plunkr。

angular.module('myApp', [])
  .directive('timeSlots', function() {        
    return {
      scope: { value: '=' },          
      link: function($scope, $elem, $attrs) {
        // you can access $scope.value here (after it has been interpolated)
      }
    };  
  })
  .controller('MainCtrl', ['$scope', function($scope) {
    $scope.value = 42;
  }]);

在 HTML 中：

<div ng-controller="MainCtrl">
  <time-slots value="value"></time-slots>      
</div>