指令范围属性注入行为

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

 
}