CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-scopeangularjs-ng-repeatangular-ui-router
user944513
user944513

Reputation: 12729

How to make custom directive in angular-js?

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

Upvotes: 0

Views: 790

Answers (2)

Jennifer Nelson
Jennifer Nelson

Reputation: 76

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
       });
     }
   }
 });

Upvotes: 0

Brendan Green
Brendan Green

Reputation: 11904

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>

Upvotes: 1

Related Questions