Question

我正在实施一个用于聚焦元素的解决方案，建议here。它适用于html输入，但不适用于自定义指令。以下是the plunk来说明问题。在页面加载时单击“聚焦输入”会将按钮旁边的文本输入聚焦，但单击“聚焦控制”不会将文本输入聚焦在它旁边。实际上，原因是单击“焦点控制”按钮时未调用$watch功能（可在浏览器控制台中看到）。

问题是为什么没有调用$watch函数？

的JavaScript

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.inputFocused = false;
  $scope.controlFocused = false;
});

app.directive('focusedWhen', function () {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      scope.$watch(attrs.focusedWhen, function (value) {
        console.log('focusedWhen', value);
        if (value) {
          element.find('input[type=text]').andSelf().trigger('focus');
        }
      });
    }
  };
});
app.directive('myControl', function () {
  return {
    restrict: 'E',
    scope: {},
    template: '<span><input type="text"></span>',
    link: function (scope, element, attrs) {

    }
  };
});

HTML

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="jquery@*" data-semver="1.7.2" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script data-require="angular.js@1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" data-semver="1.0.7"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    <div>
      <button ng-click="inputFocused = true;">Focus input</button>
      <input type="text" focused-when="inputFocused" />
    </div>
    <div>
      <button ng-click="controlFocused = true;">Focus control</button>
      <my-control focused-when="controlFocused"></my-control>
    </div>
  </body>

</html>

Answer 1

看起来问题是你的$ watch没有触发，因为后续点击时该值仍为 true 。您遇到的问题是您只关注一个输入。因此，所有按钮/输入对都需要知道如何在点击一个对等点时将自己“重置”为false。我会改为反过来 - 设置获得焦点的指令的真值而不是触发焦点的真值。您可以创建一种新的指令来监听点击（例如ng-click如何工作），然后遍历指令的子节点以找到触发其焦点的输入。同样的指令可以在link()中有一个'blur'事件，知道将其布尔值设置为false（即 controlFocus 或 inputFocus ）。

编辑您的指令myControl在您为其指定范围时创建了隔离范围：{}。来自this：

'isolate'范围与正常范围的不同之处在于它没有原型继承自父范围。这很有用创建可重复使用的组件，不应该意外地读取或修改父范围内的数据。

因此，在将{}分配给范围时，controlFocus不存在。

angularjs using directive作为另一个指令的属性

1 个答案: