angularjs – 创建更新ng模型的angular-js指令

前端之家收集整理的这篇文章主要介绍了angularjs – 创建更新ng模型的angular-js指令前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试创建一个包装twitter typeahead插件的指令。我到目前为止是:

HTML:

  1. <input ng-twitter-typeahead type="text" ng-model="participant" data="exampleData" />
  2. {{ participant }}

当我在打字机上选择一些东西时,我想要更新“参与者”的值。打字机本身工作正常,但我无法捕获所选值。以下是javascript:

  1. var app = angular.module('myApp',[])
  2. app.directive('ngTwitterTypeahead',function () {
  3. return {
  4. restrict: 'EA',scope: {
  5. data: '='
  6. },link: function ($scope,$element,$attrs) {
  7. $element.typeahead($scope.data);
  8.  
  9. $element.bind('typeahead:selected',function(obj,datum) {
  10. // I really don't know how to do this part
  11. // the variable 'datum' is what I want to be passed to ng-model
  12. // I tried things like:
  13. // Including the ngModelController and typing:
  14. // ngModel.$setViewValue(datum)
  15. // but that didn't work.
  16. }
  17. };
  18. });

对于AngularJS,我显然缺少一些基本的东西。任何帮助将不胜感激!

编辑**

我找到了解决方案。我有时候无知

  1. angular.module('siyfion.ngTypeahead',[])
  2. .directive('ngTypeahead',function () {
  3. return {
  4. restrict: 'C',scope: {
  5. datasets: '=',ngModel: '='
  6. },$attrs) {
  7. $element.typeahead($scope.datasets);
  8.  
  9. $element.bind('typeahead:selected',datum) {
  10. $scope.$apply(function() {
  11. $scope.ngModel = datum;
  12. });
  13. })
  14. }
  15. };
  16. });
您可以在指令内要求使用ngModel控制器。它将允许您访问链接功能中的模型控制器,请参见 http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController

在这里你可以找到一个例子,如何使用它的现实生活http://suhairhassan.com/2013/05/01/getting-started-with-angularjs-directive.html#.UhSdDOZdXUE

猜你在找的Angularjs相关文章