從Angular指令中獲取輸入字段的值

Question

我正在使用this answer中的指令在輸入字段中按下Enter鍵時運行函數。

如何將輸入字段element.val()的值傳遞給指令調用的函數？或者將輸入字段element傳遞給該函數，以在檢索後清除該值。

HTML

<input type="text" ng-enter="newField()" /> 

JS

app.directive('ngEnter', function() { 
    return function(scope, element, attrs) { 
     element.bind("keydown keypress", function(event) { 
      if(event.which === 13) { 
       element.val(); // value of input field 

       scope.$apply(function(){ 
        scope.$eval(attrs.ngEnter); // passed to this function 
       }); 

       event.preventDefault(); 
      } 
     }); 
    }; 
}); 

Answer 1

你可能只是這樣做：

var func = scope.$eval(attrs.ngEnter); 
func(); 

，並有控制器取值邏輯的照顧。請參閱下面的代碼。 Live demo (click).

此外，我不建議在ng前綴自定義指令。我建議用自己的前綴作爲名稱空間。 ng是Angular的核心。在我的示例中，我使用的是my-enter而不是ng-enter。

樣品標記：

<input 
    type="text" 
    ng-model="foo" 
    my-enter="myFunc" 
    placeholder="Type stuff!" 
    > 
    <p ng-repeat="val in cachedVals track by $index">{{val}}</p> 

的JavaScript：

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

app.controller('myCtrl', function($scope) { 
    $scope.cachedVals = []; 
    $scope.foo = ''; 
    $scope.myFunc = function() { 
    $scope.cachedVals.push($scope.foo); 
    $scope.foo = ''; 
    }; 
}); 

app.directive('myEnter', function() { 
    return function(scope, element, attrs) { 
    element.bind("keydown keypress", function(event) { 
     if(event.which === 13) { 
     scope.$apply(function(){ 
      var func = scope.$eval(attrs.myEnter); 
      func(); 
     }); 
     event.preventDefault(); 
     } 
    }); 
    }; 
}); 

這裏有一個孤立的範圍的例子 - 你不需要$eval。

app.directive('myEnter', function() { 
    return { 
    scope: { 
     func: '=myEnter' 
    }, 
    link: function(scope, element, attrs) { 
     element.bind("keydown keypress", function(event) { 
     if(event.which === 13) { 
      scope.$apply(function(){ 
      scope.func(); 
      }); 
      event.preventDefault(); 
     } 
     }); 
    } 
    }; 
}); 

Answer 2

您試過ng-submit？我創建了一個小提示，告訴你如何在不需要自己的指令的情況下對自己做了什麼。

http://jsfiddle.net/a6k7g/

顯然，這答案取決於你的要求，形式複雜。