Question

我想制作一个基本上像专门的输入字段一样的指令。经过一些逻辑和用户输入时，'value'属性将填充一串逗号分隔的时隙（hh：mm）。

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

变为

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

我想为任何人提供灵活性，可以在'value'属性标记中放置范围引用 - 每当更新属性值时，范围引用也是如此。（在下面的代码中，myModel.times将在MyController范围内。）

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

我在访问指令中的'value'属性时没有遇到任何问题。 但是，我没有实现双向绑定 - 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>

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

1 个答案: