Je travaille sur un widget qui changera dynamiquement son contenu chaque fois que je clique sur un bouton correspondant. J'ai passé une tonne d'heures à comprendre cela mais je ne pouvais pas.
J'ai stocké toutes les données fournies avec l'usine angulaire. Ce que j'aimerais réaliser, c'est que chaque fois que je clique sur un bouton, il déclenche un événement pour saisir une autre propriété, qui est également un autre ensemble de données, dans les données d'usine. Et ceux-ci seront affichés dans la zone de contenu avec ng-repeat.
Je vais joindre mon exemple de code ci-dessous pour votre information. Veuillez laisser tout conseil ou tout concept qui m'aidera à comprendre et à mieux comprendre cela. Merci pour votre temps!
//index.html
<div directive>
<div class='buttons'>
<p>Button A</p>
<p>Button B</p>
<p>Button C</p>
</div>
<div>
<a ng-repeat='a in data'>{{a.title}} {{a.author}}</a>
</div>
</div>
//app.js
app.directive('directive', ['factoryData', function(factoryData) {
return {
restrict: 'A',
link: function ($scope, ele, attrs) {
$scope.data = factoryData.firstProp;
var btns = $(ele).find('p');
p.on('click', function () {
$scope.data = factoryData.secondProp;
...
...
});
},
};
}]);
Vous devez utiliser $applydans votre directive lorsque vous essayez de lier les nouvelles données à la portée hors du contexte angulaire.
app.directive('directive', ['factoryData', function(factoryData) {
return {
restrict: 'A',
link: function ($scope, ele, attrs) {
$scope.data = factoryData.firstProp;
var btns = $(ele).find('p');
p.on('click', function () {
$scope.$apply(function() { // use $apply to set the data..in scope
$scope.data = factoryData.secondProp;
});
...
...
});
},
};
}]);
Cet article est collecté sur Internet, veuillez indiquer la source lors de la réimpression.
En cas d'infraction, veuillez [email protected] Supprimer.
laisse moi dire quelques mots