AngularJS指令：与指令一起使用的表达式“未定义”......是不可分配的

Question

我是一个 2 周大的 Angular 菜鸟，我已经尝试了我的第一个指令超过一天了。 :P 我读过this 和this，这似乎是很好的指令介绍和一堆 Stackoverflow 答案，但我无法正常工作。

<div ng-app="App" ng-controller="Main">
  <textarea caret caret-position="uiState.caretPosition"></textarea>
  {{uiState.caretPosition}}
</div>

和

angular.module('App', [])
  .controller('Main', ['$scope', function ($scope) {
    $scope.uiState = {};
    $scope.uiState.caretPosition = 0;
  }])


  .directive('caret', function() {
    return {
      restrict: 'A',
      scope: {caretPosition: '='},
      link: function(scope, element, attrs) {
        var $el = angular.element(element);
        $el.on('keyup', function() {
          scope.caretPosition = $el.caret();
        });
      }
    };
  }); 

小提琴是here。我基本上是在尝试在文本框中获取插入符号的位置。我在小提琴中使用了这个jQuery plugin（.caret() 方法的来源，它应该只返回一个数字）。

我的问题是

1. 我还需要一个指令吗？ Ben Nadel says 最好的指令是你不必写的（阿门！）
2. 如果是，这是执行指令的正确方法吗？即具有双向绑定变量的隔离范围？
3. 如果是，当我在本地运行此代码时，我不断收到错误Expression 'undefined' used with directive 'caret' is non-assignable!。我已阅读 the doc，据我所知，我已按照说明进行了修复，但无济于事。
4. 奖励：为什么在 jsfiddle 中我没有收到这样的错误。小提琴只是默默地失败了。那是怎么回事？

谢谢！

Answer 1

我的解决方案在这里更难找到，但更容易实施。我不得不把它改成相当于;

  scope: {caretPosition: '=?'},

（请注意，问号使属性成为可选属性。在 1.5 之前，这显然不是必需的。）

Answer 2

你很接近..主要问题是在 Angular 不知道的事件中更改范围变量。当该事件发生时，您必须使用 scope.$apply 告诉 Angular 发生了一些变化。

  $el.on('keyup', function() {
      scope.$apply( function() {
        scope.caretPosition = $el.caret();
      });
  });

Working fiddle here

问题：

1. 是的，我认为不必为此编写指令。
2. 在这种情况下，看起来不错。
3. 不确定，jsfiddle 没有问题。听起来你在某处设置carat="something"？检查以确保 html 与小提琴中的内容相同。
4. 同3

另请注意，如果您单击并移动插入符号，它不会更新，因为它只是在监听 keyup。