How to make custom directive in angular-js?

Question

Could anybody please tell me how to make custom directive in angular js .I am trying to make autocomplete using jquery-autocomplete in angular-js.

In jQuery it is display like this http://jsfiddle.net/dfapnrxf/ or this https://jqueryui.com/autocomplete/

I am trying to make this type of autocomplete in angular-js

So I made custom directive .But could you please tell me where I am doing wrong ?

This is my 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"
    ];
})

Brendan Green · Accepted Answer · 2015-05-15 03:27:10Z

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>

Jennifer Nelson · Accepted Answer · 2015-05-15 04:05:48Z

A directive has access to it's parent scope only if you don't define a local scope for the directive. Since you have defined an empty local scope for your directive as follows:

app.directive('autosemple',function(){
   return {
     restrict:'A',
     scope:{
    }, ...

Your directive doesn't have access to $scope.availableTags defined in your controller. You can solve this problem either by, 1) deleting the empty local scope on your directive, or 2) adding the scope.availableTags to the link function for your directive. I personally recommend option 2) as you can get into trouble relying on the parent's scope for a directive (e.g. when a directive is used multiple times by different controllers).

So to define availableTags in the scope of your link function, you can either a) pass it in as a custom attribute on the HTML tag, or b) you can just define scope.availableTags inside your link function -- which is what I did in the code below and in this codepen: 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
       });
     }
   }
 });

Collectives™ on Stack Overflow

How to make custom directive in angular-js?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related