Question

您好我正在研究angularjs的自定义指令。我只是想知道如何在单击按钮时调用该指令。请建议我如何实现这一目标。

由于

Answer 1

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

Answer 2

以下示例显示了一个可以处理点击事件的示例自定义指令;这是一个与范围无关的指令。并且必须先定义appRoot模块。

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

Answer 3

通过＆＃34;呼叫＆＃34;该指令我将假设您指的是从指令处理onclick事件。

您可以利用＆＃39;链接＆＃39;附加范围初始化和函数的指令的属性如下：

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

});

Answer 4

此示例显示如何在指令中处理多个按钮的单击事件：

Java脚本：（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>

Answer 5

如果您想询问如何在按钮单击时显示指令模板，请使用控制器范围中的变量来显示/隐藏它，并在按钮单击时更新变量。

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

如何在自定义指令内单击按钮时调用该指令

5 个答案: