如何將方法傳遞給角度屬性指令？

我想清除過濾器的輸入字段，當用戶按Esc鍵。只要我輸入指令標記，過濾器就會完全停止工作。如何將方法傳遞給角度屬性指令？

我的標記如下：

<div ng-app='App'> 
    <div ng-controller="MyCtrl"> 
    <input type="text" ng-model="itemSearch" clear-input clear="clearFilter()" /> 
    <button ng-click="clearFilter()">Clear</button> 
    <ul> 
     <li ng-repeat="item in items|filter:itemSearch"> <span>{{item.value}}</span> 
     </li> 
    </ul> 
    </div> 
</div>

和JavaScript如下：

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

function MyCtrl($scope) { 
    $scope.items = [ 
    {value: 'one two three'}, 
    {value: 'four five six'} 
    ]; 
    $scope.clearFilter = function() { 
    $scope.itemSearch = ''; 
    }; 
} 

app.directive('clearInput', function() { 
    function isEscapeKey(keyCode) { 
    if (keyCode === 27) { 
     return true; 
    } 
     return false; 
    } 
    return { 
     restrict: 'A', 
     scope: { 
     clear: '&' 
    }, 
    link: function (scope, element) { 
     element.keyup(function (event) { 
     if (isEscapeKey(event.keyCode)) { 
      scope.clear(); 
     } 
     }); 
    } 
    }; 
});

我來到這裏的示例代碼：http://jsfiddle.net/darrenthomas/cbcpq/1/

我想指出我不是一個有經驗的JavaScript程序員，我是AngularJS的新手。我也看過How do I pass multiple attributes into an Angular.js attribute directive?，但我無法獲得工作解決方案。

來源

2013-10-30 Darren

刪除：

scope: { 
     clear: '&' 
    },

在directive.We這裏不需要隔離範圍。

像Webnet說使用：

element.bind('keyup', function (event) { 
    if (isEscapeKey(event.keyCode)) { 
     scope.clear(); 
    } 
    });

後，加入$apply到您的指令：

app.directive('clearInput', function() { 
    function isEscapeKey(keyCode) { 
     if (keyCode === 27) { 
      return true; 
     } 
     return false; 
    } 
    return { 
     restrict: 'A', 
     link: function (scope, element) { 
      element.bind('keyup', function (event) { 
       if (isEscapeKey(event.keyCode)) {         
        scope.$apply(function(){scope.clearFilter();}); 
       } 
      }); 
     }, 
    }; 
});

工作演示Fiddle

來源

2013-10-30 15:09:25

他還需要定義'scope.clear（）' – Webnet

@Webnet我改名到'clearFilter'他在控制器 –

謝謝。爲了確保我明白了，我需要指定'require'屬性才能使它工作？我很困惑，爲什麼我需要這個？這個require還有'^'前綴：從文檔：「^前綴表示這個指令在其父母上搜索控制器（沒有^前綴，指令會在它自己的元素上查找控制器）。」你能解釋一下這是在做什麼？或者指出我的解釋？ – Darren

在你的榜樣，瀏覽器的控制檯（通過按Ctrl + Shift + I在Chrome中訪問）顯示錯誤TypeError: Object [object Object] has no method 'keyup'

你的代碼應該是...

element.bind('keyup', function (event) { 
    if (isEscapeKey(event.keyCode)) { 
     scope.clear(); 
    } 
    });

但它看起來並不像clear（）也是在你的控制器中定義的。

來源

2013-10-30 15:00:19 Webnet

更新了小提琴。 http://jsfiddle.net/cbcpq/10/。希望這有幫助

app.directive('clearInput', function() { 
function isEscapeKey(keyCode) { 
    if (keyCode === 27) { 
     return true; 
    } 
    return false; 
} 
return { 
    restrict: 'A', 
    scope: { 
     clear: '&' 
    }, 
    link: function (scope, element) { 
     $(element).keyup(function (event) { 
      if (isEscapeKey(event.keyCode)) { 
       scope.itemSearch = ""; 
       scope.$apply(); 
      } 
     }); 
    }, 
};

}）;

來源

2013-10-30 15:16:44 satish

我會避免使用jQuery版本並使用.bind（）來代替 – Webnet

如果您只想清除該字段，則無需在您編寫的自定義指令中隔離範圍。你可以簡單地使用scope的$eval()功能來間接執行clearFilter()功能

app.directive('clearInput', function() { 
function isEscapeKey(keyCode) { 
    if (keyCode === 27) { 
     return true; 
    } 
    return false; 
} 
return { 
    link: function (scope, element, attrs) { 
     element.bind('keyup',function (event) { 
      if (isEscapeKey(event.keyCode)) { 
       scope.$eval(attrs.clear); 
       scope.$apply(); 
      } 
     }); 
    }, 
    }; 
});

這裏是一個更新的Fiddle

來源

2013-10-30 15:39:47 kubuntu

你可能有多個答案可供選擇。但是，如果你想使這個clear-input指令完全可重用那麼我相信你將不得不使用$parse。主要是因爲你不能在那裏使用isolate scope和ng-model。至少不是沒有完全理解正在發生的事情。

這裏是指令代碼：展示其使用

app.directive('clearInput', function ($parse) { 
    function isEscapeKey(keyCode) { 
     return keyCode === 27; 
    } 
    return { 
     require : "^ngModel", 
     link: function (scope, element,attrs,ctrl) { 
      if(!ctrl){ 
       return; 
      } 
      var ngModelSetter = $parse(attrs.ngModel).assign; 
      element.bind("keyup",function (event) { 
       if (isEscapeKey(event.which)) { 
        ngModelSetter(scope,""); 
        scope.$apply(); 
       } 
      }); 
     } 
    }; 
});

一個plunker：

http://plnkr.co/edit/z0Td2tR3JiVPFsbgauhj?p=preview

來源

2013-10-30 15:46:16 ganaraj

如何將方法傳遞給角度屬性指令？

回答

相關問題