angularjs - How to make custom directive in angular-js? -
could please tell me how make custom directive in angular js .i trying make autocomplete using jquery-autocomplete in angular-js.
in jquery display http://jsfiddle.net/dfapnrxf/ or https://jqueryui.com/autocomplete/
i trying make type of autocomplete in angular-js
so made custom directive .but please tell me doing wrong ?
this code:
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" ]; })
try this:
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>
Comments
Post a Comment