use*_*763 20 angularjs angularjs-directive
我正在尝试创建一个包装twitter typeahead插件的指令.到目前为止我所拥有的是:
HTML:
<input ng-twitter-typeahead type="text" ng-model="participant" data="exampleData" />
{{ participant }}
Run Code Online (Sandbox Code Playgroud)
我想要在typeahead上选择某些内容时更新'参与者'的值.预先输入本身正常,但我无法捕获所选值.以下是javascript:
var app = angular.module('myApp', [])
app.directive('ngTwitterTypeahead', function () {
return {
restrict: 'EA',
scope: {
data: '='
},
link: function ($scope, $element, $attrs) {
$element.typeahead($scope.data);
$element.bind('typeahead:selected', function(obj, datum) {
// I really don't know how to do this part
// the variable 'datum' is what I want to be passed to ng-model
// I tried things like:
// Including the ngModelController and typing:
// ngModel.$setViewValue(datum)
// but that didn't work.
}
};
});
Run Code Online (Sandbox Code Playgroud)
在AngularJS方面,我显然缺少一些基本的东西.任何帮助将不胜感激!
编辑**
我找到了解决方案.我有时无能为力:
angular.module('siyfion.ngTypeahead', [])
.directive('ngTypeahead', function () {
return {
restrict: 'C',
scope: {
datasets: '=',
ngModel: '='
},
link: function ($scope, $element, $attrs) {
$element.typeahead($scope.datasets);
$element.bind('typeahead:selected', function(obj, datum) {
$scope.$apply(function() {
$scope.ngModel = datum;
});
})
}
};
});
Run Code Online (Sandbox Code Playgroud)
lua*_*sus 21
您可以ngModel在指令中要求控制器.它将使您可以访问link函数内部的模型控制器,请参阅http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController
在这里你可以找到一个如何使用现实生活的例子http://suhairhassan.com/2013/05/01/getting-started-with-angularjs-directive.html#.UhSdDOZdXUE
| 归档时间: |
|
| 查看次数: |
33124 次 |
| 最近记录: |