0

我想做一个指令，它本质上就像一个专门的输入字段。在一些逻辑和用户输入之后，“值”属性将填充一串逗号分隔的时隙 (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>
4

1 回答 1

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>
于 2013-07-31T05:21:48.577 回答