有人可以告诉我如何在角度js中制作自定义指令。我正在尝试使用angular-js中的jquery-autocomplete进行自动完成。
在jQuery中,它显示为http://jsfiddle.net/dfapnrxf/或此https://jqueryui.com/autocomplete/
我正在尝试在angular-js
中进行此类自动填充所以我制定了自定义指令。但是,请你告诉我我做错了什么?
这是我的代码:
http://codepen.io/anon/pen/eNZLpp
var app=angular.module("ionicApp",['ionic']);
app.directive('autosemple',function(){
return{
restrict:'A',
scope:{
},
link:function(scope,element,attr){
$( "#tags" ).autocomplete({
// source: availableTags
});
}
}
})
app.controller('cnt',function($scope){
$scope.availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
})
答案 0 :(得分:1)
试试这个:
var app=angular.module("ionicApp",['ionic']);
app.directive('autosemple',function(){
return{
restrict:'A',
scope:{
autoTags: '=availableTags'
},
link:function(scope,element,attr){
console.log(element);
$(element).autocomplete({
source: scope.autoTags
});
}
}
})
app.controller('cnt',function($scope){
$scope.availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
})
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Tabs Example</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body ng-controller="cnt">
<input type="text" autosemple available-tags="availableTags">
</body>
</html>
答案 1 :(得分:0)
只有在您没有为指令定义本地范围时,指令才能访问它的父作用域。由于您已为指令定义了一个空的本地范围,如下所示:
app.directive('autosemple',function(){
return {
restrict:'A',
scope:{
}, ...
您的指令无法访问控制器中定义的$ scope.availableTags。您可以通过以下方式解决此问题:1)删除指令中的空本地作用域,或者2)将scope.availableTags添加到指令的链接函数中。我个人推荐选项2),因为你可能会依赖父指令的范围来解决问题(例如,当一个指令被不同的控制器多次使用时)。
因此,要在链接函数范围内定义availableTags,您可以a)将其作为HTML标记的自定义属性传递,或者b)您可以在链接函数中定义scope.availableTags - 这是我在下面的代码和这个代码中做了什么:http://codepen.io/jwncoexists/pen/KpzJrZ
app.directive('autosemple',function(){
return {
restrict:'A',
scope:{
},
link:function(scope,element,attr){
scope.availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: scope.availableTags
});
}
}
});