Question

我想要做的是传入一个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>

感谢您的帮助！：）

Answer 1

它不起作用，因为您将代码封装在

中

scope: { key: '@key' },

只需将key-presser-not-working属性添加为范围

即可

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

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

最终代码。

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

指令范围属性注入行为

1 个答案: