指令范围属性注入行为

Directive scope attribute injection behaviour

本文关键字：注入 属性 范围 指令      更新时间：2023-09-26

我想做的是传入一个JavaScript键代码（在我的代码段中，我使用13，它是输入/返回键），但是下面示例中的第二个指令没有按预期工作。

由于某种原因，当我注入范围属性时，不会计算传递到指令中的函数。工作示例（第一个指令）没有范围注入，并且工作正常。

这是有意的行为吗？还是我做错了什么？

angular.module('taskLister', []);
angular.module('taskLister')
  .controller('ListController', ListController);
ListController.$inject = ['$log'];
angular.module('taskLister')
  .directive('keyPresser', keyPresser);
keyPresser.$inject = ['$log'];
angular.module('taskLister')
  .directive('keyPresserNotWorking', keyPresserNotWorking);
keyPresserNotWorking.$inject = ['$log'];
function ListController($log) {
  var vm = this;
  vm.editingListTitle = false;
  vm.editListTitle = editListTitle;
  vm.finishedEditListTitle = finishedEditListTitle;
  function editListTitle() {
    vm.editingListTitle = true;
    $log.info('editing');
  }
  function finishedEditListTitle() {
    vm.editingListTitle = false;
    $log.info('finished editing');
  }
}
//********
//Working
//********
function keyPresser($log) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      element.bind('keydown keypress', function(event) {
        if (event.which === 13) {
          scope.$apply(function() {
            scope.$eval(attrs.keyPresser);
          });
          event.preventDefault();
        }
      });
    }
  };
}
//********
//Not Working
//********
function keyPresserNotWorking($log) {
  return {
    restrict: 'A',
    scope: {
      key: '@key'
    },
    link: function(scope, element, attrs) {
      element.bind('keydown keypress', function(event) {
        scope.key = Number(scope.key);
        if (event.which === scope.key) {
          scope.$apply(function() {
            scope.$eval(attrs.keyPresserNotWorking);
          });
          event.preventDefault();
        }
      });
    }
  };
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<div ng-app="taskLister">
  <div ng-controller="ListController as vm">
    has the user pressed enter? - {{vm.editingListTitle}}
    <br/>
    <input type="text" key-presser="vm.editListTitle()" placeholder="Press Enter">
    <br/>
    <input type="text" key-presser-not-working="vm.editListTitle()" key="13" placeholder="Press Enter but it doesnt work">
    <br/>
    <button ng-click="vm.finishedEditListTitle()" type="button">Reset</button>
    <br/>
  </div>
</div>

感谢您的任何帮助！ :)

它

不起作用，因为您封装了代码

scope: { key: '@key' },

只需将key-presser-not-working属性添加为范围的一部分

scope: { key: '@key', keyPresserNotWorking: '&' },

然后使用 scope.keyPresserNotWorking() at 链接方法调用它。

最终代码。

function keyPresserNotWorking($log) {
  return {
    restrict: 'A',
    scope: {
      key: '@key',
      keyPresserNotWorking: '&'
    },
    link: function(scope, element, attrs) {
      element.bind('keydown keypress', function(event) {
        scope.key = Number(scope.key);
        if (event.which === scope.key) {
          scope.$apply(function() {
            scope.keyPresserNotWorking();
          });
          event.preventDefault();
        }
      });
    }
  };
}

相关文章：