我是一个2周的Angular noob,我一直在尝试我的第一个指令超过一天。 :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()方法的来源,它应该只是返回一个数字)。
我的问题是
>我甚至在这里需要一个指令吗? Ben Nadel says最好的指令是你不必写的(对此而言)
>如果是的话,这是正确的方法吗?即孤立的范围与双向绑定变量?
>如果是的话,当我在本地运行这个代码时,我会继续收到错误’notefined’错误,指令’caret’是不可分配的!我已经阅读了the doc,据我所知,我已经遵循了如何修复无效的说明。
>奖金:为什么在jsfiddle我不会得到这样的错误。小提琴刚刚失败了。那是什么
谢谢!
你很近..主要的问题是在角度不知道的事件中改变范围变量。当事件发生时,您必须通过使用范围来指出有变化的内容。$ apply。
$el.on('keyup',function() { scope.$apply( function() { scope.caretPosition = $el.caret(); }); });
对于问题:
>是的,我不认为有必要为此写一个指令。
>在这种情况下,似乎很好。
>不确定,jsfiddle中没有问题。听起来你在某处设置克拉=“某物”?检查以确保html与小提琴中的相同。
>与3相同
另请注意,如果您单击并移动插入符号,它将不会更新,因为它只侦听keyup。