Директива по применению атрибута области видимости

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

 
}