Angularjs 如何在自定义指令内单击按钮调用指令_Angularjs_Angularjs Directive

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

angularjs

Angularjs 如何在自定义指令内单击按钮调用指令,angularjs,angularjs-directive,Angularjs,Angularjs Directive,嗨，我正在编写angularjs的自定义指令。我只是想知道当我点击按钮时如何调用指令。请建议我如何做到这一点谢谢呼叫clickMe（） app.directive（'mydirc'，function（）{ 返回{ 限制：'E'，替换：正确，模板：“”，链接：函数（$scope，element，attrs）{ $scope.clickMe=function（）{ 警报（“内部点击”）； } } } }); 以下示例显示了一个可以处理单击事件的示例自定义指令；这是一个范围独立的指令。并且A

嗨，我正在编写angularjs的自定义指令。我只是想知道当我点击按钮时如何调用指令。请建议我如何做到这一点

谢谢


呼叫clickMe（）
app.directive（'mydirc'，function（）{
返回{
限制：'E'，
替换：正确，
模板：“”，
链接：函数（$scope，element，attrs）{
$scope.clickMe=function（）{
警报（“内部点击”）；
}
}
}
});

以下示例显示了一个可以处理单击事件的示例自定义指令；这是一个范围独立的指令。并且Approt模块必须在前面定义

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


点击我
批准指令（'customClick'，函数（）{
返回{
链接：函数（范围、元素、属性）{
元素。单击（函数（）{
//做些有用的事
}); 
}
}
});

通过“调用”指令，我假设您的意思是处理指令中的onclick事件

您可以利用指令的“link”属性来附加作用域初始化和函数，如下所示：

HTML


JS-Bin

var-app=angular.module（'app'，[]）；
应用程序指令（'clicker'，function（）{
变量链接=功能（范围）{
scope.showMessage=函数（）{
警报（'您单击了指令！'）；
};
};
返回{
链接：链接，
模板：“点击我！”
};
});

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

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


呼叫clickMe（）
应用程序控制器（“ctrl”，函数（$scope）{
$scope.showmydrc=false；
$scope.clickMe=函数（）{
$scope.showmydrc=true；
}
});

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

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>
        `

    };

});

<!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>

angular.module（'app'，[]）
.controller（“articles.controller”，函数（）{
var viewModel=此；
viewModel.articles=
[
{
标题：“PHP”，
内容：“内容1”，
所选：false
},
{
标题：“C#”，
内容：“内容2”，
所选：false
}
];
viewModel.addArticle=函数（）{
viewModel.articles.push(
{
标题：“MySQL”，
内容：“新内容”，
所选：false
}
);
};
viewModel.select=函数（文章）{
article.selected=！article.selected；
};
viewModel.getAll=函数（）{
console.clear（）；
console.log（viewModel.articles）；
};
viewModel.getSelected=函数（）{
console.clear（）；
angular.forEach（viewModel.articles，函数（article，key）{
如果（文章选择）
{
console.log（article.title）；
}
}); 
};
})
.指令（“artilceTile”，函数（）{
返回{
限制：'E'，
范围：{
文章：'='
},
链接：功能（范围、元素、属性）
{
scope.displayTitle=函数（）
{
警报（范围、文章、标题）；
},
scope.displayContent=函数（）
{
警报（范围、文章、内容）；
},
scope.inverseArticleStatus=函数（）
{
scope.article.selected=！scope.article.selected；
}
},
模板：`
{{文章标题}
{{article.content}
已选择
书名
显示内容
挑选
不选择




`
};
});

HTML：（index.HTML）

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>
        `

    };

});

<!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>





添加新文章
获取选定的文章
获取所有文章

你是指在指令中编写的函数吗？您好，我想知道当我们单击按钮时，它会转到指令并打印模板，但html页面中没有包含指令。如何操作请建议memy代码：Name:
密码：
success，我的app.js是：app.directive（'alertsview'，function（）{return{link:function（scope，element，attrs）{alert（“hello”）；element.click（function（）{//Do something有用的警报（“success”）；}}）；当我点击“成功”按钮时，它会转到“警报”指令并打印相关模板“如何做请建议我”在这里，当我们在相关指令激活时单击按钮时，我们直接调用DIACTIVE。在该指令中，包含html页面“有趣”。即使按钮在外部，这仍然有效吗e

？@user1893354是。

和

共享相同的范围。

<!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>