web-dev-qa-db-fra.com

comment appeler la directive sur le clic de bouton dans la directive personnalisée

Salut, je travaille sur les directives personnalisées de angularjs. Je veux juste savoir comment appeler la directive lorsque je clique sur le bouton. S'il vous plaît m'a suggéré comment y parvenir. 

Merci

angularjsangularjs-directive
11
user3836920
<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');
            }
        }
    }
});
12
sam rodrigues

L'exemple suivant montre un exemple de directive personnalisée pouvant gérer des événements de clic; Ceci est une directive indépendante de la portée. Et le module appRoot doit être défini plus tôt.

<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
          }); 
        }
    }
});
8
Vidhya Sagar Reddy

En "appelant" la directive, je présume que vous voulez dire gérer l'événement onclick à partir de la directive.

Vous pouvez utiliser la propriété 'link' des directives pour associer l'initialisation de la portée et des fonctions comme suit:

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

});
5
ljrh

Cet exemple montre comment gérer un événement de clic pour plusieurs boutons dans une 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>

1
Nezar Fadle

Si vous voulez demander comment afficher un modèle de directive lors d’un clic sur un bouton, utilisez une variable dans la portée du contrôleur pour l’afficher/le masquer et mettre à jour la variable lors d’un clic sur le bouton.

<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;
    }
});
0
abc def