AngularJS 指令 : Expression 'undefined' used with directive . .. 是不可赋值的

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();
        });
      }
    };
  }); 

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

我的问题是

我在这里甚至需要一个指令吗？ Ben Nadel says最好的指令是你不必写的(阿门!)

如果是，这是执行该指令的正确方法吗？即具有双向绑定(bind)变量的隔离范围？

如果是，当我在本地运行此代码时，我不断收到错误 Expression 'undefined' used with directive 'caret' is non-assignable! .我已阅读 the doc据我所知，我已按照有关如何修复的说明进行操作，但无济于事。

奖励:为什么在 jsfiddle 中我没有收到这样的错误。 fiddle 只是默默地失败了。那是怎么回事？

谢谢!

Answer 1

我的解决方案在这里更难找到，但更容易实现。我不得不将其更改为等效于；

  scope: {caretPosition: '=?'},

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