CODEWITHSUNDEEP
angularjsangularjs-directive
user3836920
user3836920

Reputation: 151

how to call the directive on button click inside custom directive

Hi i am working on custom directives of angularjs. I just want to know that how to call the directive when I click the button. Please suggested me how to achieve this.

Thanks

Upvotes: 13

Views: 49310

Answers (5)

Nezar Fadle
Nezar Fadle

Reputation: 1355

This example shows how to handle a click event for more than one button inside a directive:

Java Script: ( app.js )

angular.module('app', [])

.controller("articles.controller", function(){

    var viewModel = this;

    viewModel.articles = 
    [
        {
            title: "PHP",
            content: "content 1",
            selected: false
        },
        {
            title: "C#",
            content: "content 2",
            selected: false
        }
    ];

    viewModel.addArticle = function(){

        viewModel.articles.push(
            {
                title: "MySQL",
                content: "new content",
                selected: false
            }
        );
    };


    viewModel.select = function(article){

        article.selected = !article.selected;

    };

    viewModel.getAll = function(){

        console.clear();
        console.log(viewModel.articles);

    };

    viewModel.getSelected = function(){

        console.clear();

        angular.forEach(viewModel.articles, function(article, key){

                if(article.selected)
                {
                    console.log(article.title);
                }

        }); 

    };


})

.directive("artilceTile", function(){

    return {
        restrict: 'E',
        scope: {
          article: '='
        },
        link: function(scope, element, attr)
        {
            scope.displayTitle = function()
            {
                alert(scope.article.title);
            },
            scope.displayContent = function()
            {
                alert(scope.article.content);
            },
            scope.inverseArticleStatus = function()
            {
                scope.article.selected = !scope.article.selected;
            }
        },
        template: `
                <h1>{{article.title}}</h1>
                <p>{{article.content}}</p>
                <p ng-if="article.selected">Selected</p>
                <input ng-model=article.title>
                <button ng-click="displayTitle()">Dispaly Title</button>
                <button ng-click="displayContent()">Display Content</button>
                <button ng-click="inverseArticleStatus()" ng-if="!article.selected">Select</button>
                <button ng-click="inverseArticleStatus()" ng-if="article.selected">Unselect</button>
                <br><br><br><hr>
        `

    };

});

HTML: ( index.html )

<!DOCTYPE html>
<html ng-app="app">
<head>
    <title></title>
</head>
<body>

<div ng-controller="articles.controller as articlesController">

    <span ng-repeat="article in articlesController.articles">
        <artilce-tile article="article"></artilce-tile>
    </span>

    <br><br>
    <button ng-click="articlesController.addArticle()">Add New Article</button>
    <button ng-click="articlesController.getSelected()">Get Selected Articles</button>
    <button ng-click="articlesController.getAll()">Get All Articles</button>

</div>

<script type="text/javascript" src="angular.js"></script>
<script src="app.js"></script>

</body>

Upvotes: 1

abc def
abc def

Reputation: 1

If you mean to ask how to show a directive template on button click, use a variable in the controller scope to show/hide it and update the variable on button click.

<div ng-controller="ctrl">
    <mydirc ng-show="showMydirc"></mydirc>
    <button ng-click="clickMe()">call clickMe()</button>
</div>

app.controller("ctrl", function($scope){
    $scope.showMydirc=false;
    $scope.clickMe = function(){
        $scope.showMydirc = true;
    }
});

Upvotes: 0

ljrh
ljrh

Reputation: 449

By "calling" the directive I am going to assume you mean handling the onclick event from the directive.

You can leverage the 'link' property of directives to attach scope initialization and functions like so:

http://jsbin.com/moruyoso/2

HTML

<!DOCTYPE html>
<html ng-app='app'>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div clicker></div>
</body>
</html>

JS

var app = angular.module('app', []);

app.directive('clicker', function(){

  var link = function(scope){
      scope.showMessage = function(){
        alert('you clicked the directive!');
      };
  };

  return{
    link: link,
    template: "<button ng-click='showMessage()'>Click me!</button>"
  };

});

Upvotes: 5

Vidhya Sagar Reddy
Vidhya Sagar Reddy

Reputation: 1641

The following example shows a sample custom directive which can handle click events; This is a scope-independent directive. And the appRoot module has to be defined earlier.

<div ng-controller="MyController">
    <button custom-click="">Click Me</button>
</div>

appRoot.directive('customClick', function() {
    return {
        link: function(scope, element, attrs) {
          element.click(function(){
           //Do something useful
          }); 
        }
    }
});

Upvotes: 10

sam rodrigues
sam rodrigues

Reputation: 580

<div ng-controller="ctrl">
    <mydirc></mydirc>
    <button ng-click="clickMe()">call clickMe()</button>
</div>

app.directive('mydirc', function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<div></div>',
        link: function($scope, element, attrs) {
            $scope.clickMe= function() {
                alert('inside click');
            }
        }
    }
});

Upvotes: 14

Related Questions