AngularJS:代码属于哪里,在解析承诺后更新表单字段？

控制器:

angular.module('myApp')
  .controller('MyController', MyController);

MyController.$inject = ['myRestApiResource'];

function MyController(myRestApiResource) {
  var vm = this;
  vm.save = function() {
    var params = [];
    var postData = {text: vm.text};
    myRestApiResource.save(params, postData)
      .then(function(res) { /* success handler */ })
      .catch(function(res) { /* error handler */ });
  };
}

当资源save()方法的$ promise被拒绝时,响应数据(在某些情况下)包含一个error.position属性,该属性引用检测到语法错误的字符串索引vm.text.

在这些情况下,我专注于</code>元素并设置从<code>error.position</code>下一个非单词字符的选择范围.我有一个功能,这一切都很好.</p> <p>我的问题是:</p> <p>如果函数调用设置了<code><textarea></code>(在承诺被拒绝之后)的选择范围,则执行...</p> <ol> <p>控制器</p> <p>自定义指令添加到textarea</p> <p>别的地方</p> </ol> <p>......为什么？</p> <p>这是关于<strong>分离关注点的问题</strong>.</p> <p>控制器似乎是最明智的地方,但我理解控制器不应该执行DOM操作......这需要使用<code>$element</code>服务(或jQuery)来做到这一点.</p> <p>自定义指令需要订阅控制器广播的事件,然后设置自己的焦点和选择范围.这将问题分开,但根据Angular Best Practices, <code>$broadcast</code>并且<code>$on</code>只应用于"在整个应用程序中与全球相关的事件".</p> <p>我想控制器和指令可以通过另一个服务进行通信,但这看起来就像是过度工程 - 这是我臭名昭着的,并且在这里努力避免!:-)</p> <p>提前致谢!</p> <hr> <h2>解</h2> <p>为了完整起见,这是我根据@ kristin-fritsch的回答编写的自定义指令:</p> <p><strong>指示</strong></p> <pre class="brush:bash;">angular.module('myApp') .directive('selectionRange', selectionRangeDirective); function selectionRangeDirective() { return { restrict: 'A', scope: { selectionRange: '=' }, link: function(scope, iElement) { var element = iElement[0]; if (element.setSelectionRange && typeof element.setSelectionRange === 'function') { scope.$watch('selectionRange', function(range) { if (range && typeof range.start === 'number' && range.start > -1 && range.start < iElement.val().length) { element.focus(); element.setSelectionRange(range.start, range.end); } }); } } }; } </pre> <p>为了实现它,我将指令属性添加到我的textarea:</p> <pre class="brush:bash;"><textarea ng-model="vm.text" rows="5" selection-range="vm.selection">

... 当promise被拒绝时,设置我的控制器中vm.selection具有start和end属性的对象的值.

myRestApiResource.save(params, postData)
  .then(function(res) { /* success handler */ })
  .catch(function(res) {
    var error = res.data.error;
    if (error && error.position) {
      var start = error.position;
      var end = start + vm.text.substr(start).search(/(\W|$)/);
      vm.selection = {start: start, end: end};
    }
  });

  
  Save

$scope.errorPosition = 50;

  
  Save

$scope.errorPosition = 50;