Ciao sto lavorando su direttive personalizzate di angularjs. Voglio solo sapere come chiamare la direttiva quando clicco sul pulsante. Per favore suggeritemi come ottenere questo.come chiamare la direttiva sul pulsante clic all'interno della direttiva personalizzata
Grazie
<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');
}
}
}
});
Questo mi ha insegnato molto su $ scope in angolare! – mightyplow
Interessante. Funziona ancora anche se il pulsante è fuori '
@ user1893354 Sì. '
L'esempio seguente mostra una direttiva personalizzato campione che può gestire cliccare eventi; Questa è una direttiva indipendente dall'ambito. E il modulo appRoot deve essere definito in precedenza.
<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
});
}
}
});
il mio codice:
Nome:Questo è esattamente ciò che fa il codice sopra .. !!! Provalo –
Qui chiamiamo direttamente il diective quando clicchiamo sul pulsante alla volta che viene attivata la relativa direttiva. In quella direttiva contiene la pagina html – user3836920
"Chiamando" la direttiva, assumerò che intendi gestire l'evento onclick dalla direttiva.
È possibile sfruttare la proprietà 'link' delle direttive per fissare l'inizializzazione la portata e le funzioni in questo modo:
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>"
};
});
Ciao Voglio esattamente quando clicchiamo sul pulsante che va alla direttiva e stampo il modello senza includere direttiva nella pagina html come fare per favore suggeritemi – user3836920
Se significa chiedere come mostrare un modello di direttiva sul clic del pulsante , utilizzare una variabile nello scope del controller per mostrarlo/nasconderlo e aggiornare la variabile al clic del pulsante.
<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;
}
});
Questo esempio mostra come gestire un evento click per più di un pulsante all'interno di una direttiva:
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>
Intendi una funzione scritta all'interno della direttiva? –