AngularJS ng-cliquez sur ne pas appeler la fonction de la portée
J'ai personnalisé la directive qui charge un bloc de navigation à partir d'un webservice appel.
Je suis en train d'essayer de cliquer sur un de ces liens de navigation laquelle j'ai mis un "ng-click".
Je suis en train de cliquer sur le lien qui doit appeler la fonction appelée au sein de la ng-click. Cette fonction doit s'exécuter, mais il ne l'est pas.
Voici mon routage
var cartangularPublicShoppingApp = angular.module('cartangularPublicShoppingApp', [
'ngRoute',
'CategoriesController',
'CategoryServices',
'CategoryNavigationServices',
'MenuModule'
]);
cartangularPublicShoppingApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/cart', {
templateUrl: 'partials/public/cart.html',
controller: 'CartCtrl'
}).
when('/categories/:categoryId', {
templateUrl: 'partials/public/categories.html',
controller: 'CategoriesController'
}).
otherwise({
redirectTo: '/categories'
});
}]
);
Ici est la coutume de la directive
angular.module('MenuModule', [])
.directive('myCustomer', function() {
return {
restrict: 'E',
templateUrl: './partials/public/customer.html',
controller: function($scope, $sce, CategoryNavigationService) {
var z = CategoryNavigationService.getCategoryNavigation().success(function(data){
$scope.categoryNavigation = data;
var navHTML = createCategoryNavigationBar(data);
var t = $sce.trustAsHtml(navHTML);
$scope.panes = t;
}).error(function(data){
var error = "Get confident, stupid!";
var t = $sce.trustAsHtml(error);
$scope.panes = t;
});
function createCategoryNavigationBar(categoryNavigation){
var test = "";
var categoryId;
var catNavArray = categoryNavigation.categoryNavigationArray;
for(categoryId in catNavArray){
var currentCategoryNavigation = categoryNavigation.categoryNavigationArray[categoryId];
var string = '<li> <a href="javascript:void(0);" name="categoryId" ng-click="getProductsForCategory()">' + currentCategoryNavigation.categoryName + "</a>";
test = test + string;
var count = 0;
var countingNavArr = currentCategoryNavigation.categoryNavigationArray;
for(var countingObject in countingNavArr){
count++;
}
if(count > 0){
var innerCategoryId;
test = test + "<ul>";
for(innerCategoryId in currentCategoryNavigation.categoryNavigationArray){
var innerCategoryNavigation = currentCategoryNavigation.categoryNavigationArray[innerCategoryId];
var innerTest = createCategoryNavigationBar(innerCategoryNavigation);
test = test + innerTest;
}
test = test + "</ul>";
}
test = test + "</li>";
}
test = '<ul id="menu">' + test + '</ul>';
return test;
}
}
};
});
Ici, c'est le contrôleur qui est acheminé à mon fragment html que je suis en train de montrer la directive.
var categoriesControllers = angular.module('CategoriesController', []);
categoriesControllers.controller('CategoriesController', ['$scope', '$routeParams' , '$location', 'CategoryService',
function($scope, $routeParams, $location, CategoryService) {
var categoryId = $routeParams.categoryId;
getProductsByCategoryIdServiceCall(CategoryService, categoryId);
$scope.getProductsForCategory = function(){
var categoryId = 4;
getProductsByCategoryIdServiceCall(CategoryService, categoryId);
}
function getProductsByCategoryIdServiceCall(CategoryService, categoryId){
CategoryService.getProductsByCategoryId(categoryId).success(function(data){
$scope.productsDTO = data;
$scope.name = "David M Pugh";
}).error(function(data){
$scope.name = "David Q Pugh";
$scope.name = data;
});
}
}]);
Voici fragment de code à partir de categories.html que contient la coutume de la directive:
<div class="row-fluid">
<div class="span12">
<div class="navbar">
<div class="navbar-inner">
<div class="container" style="width: auto;">
<div class="span5"></div>
<div class="span2">
<div id="currentCategoryDropBoxMenu">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br />
<my-customer></my-customer>
<br />
J'ai essayé de changer la méthode javascript appelée à l'intérieur de ng-cliquez sur:
ng-click="getProductsForCategory".
à la fois des résultats de la méthode getProductsForCategory pas être appelée lorsque le lien est cliqué,
Quelqu'un a une idée de ce que mon problème est?
merci,
David
ÉDITÉ INFO*
Hey les gens, merci pour la recherche dans ce problème. Il est toujours en cours, mais j'ai ajouté un test de mon code html pour mon custom directive
<div ng-bind-html="panes"></div>
<a href="javascript:void(0);" ng-click="getProductsForCategory()">testing</a>
Avant la seule ligne a été la première balise qui a été la div.
J'ai ajouté de la 2e ligne pour voir si elle était peut-être la liaison du html directement à la balise div dans la directive, ou si il y a un problème avec la directive de configuration de l'ailleurs.
La deuxième balise, j'ai ajouté devrait être un standard ng-cliquez sur l'opération. mon 2ème a href de la balise n'
appel de la fonction getProductsForCategory().
Donc, il ne semble pas être dû à ma liaison de ma chaîne html de l'élément div pour la directive.
Le problème est que ma structure de navigation, je suis bâtiment peut infini imbriqués les éléments enfants (en gros, c'est un suckerfish boîte de sélection).
Cela signifie que je vais devoir utiliser la récursivité pour tracer chaque parent-enfant de navigation
la structure...dans une directive...
OriginalL'auteur David Pugh | 2013-11-16
Vous devez vous connecter pour publier un commentaire.
Il vous manque un ensemble de broches en
ng-click
balisageng-click="getProductsForCategory"
Devrait être
ng-repeat
? Les contrôleurs ne doivent jamais être utilisés pour la manipulation DOMBonjour Charlietfl. La raison pour laquelle je ne vous contentez pas de lui transmettre les données acontroller champ d'application et laissez angulaire de gérer les DOM avec ng-repeat, c'est que les données est un ensemble de parent-enfant les liens de catégorie, où il peut y avoir un nombre infini de catégories imbriquées. La ng-repeat peut se répéter sur une liste, mais que diriez-vous d'une liste qui contient N-calques imbriqués, et ils doivent être dans la bonne page html afin de le suckerfish dropbox pour le travail. Avant angulaire j'étais juste récursive à l'aide de php sur le serveur et retourne une chaîne de pré formaté en html.Je ne sais pas comment le faire avec json retourné et avec les directives et angulaire
pouvez tester pour les enfants et l'utilisation d'un modèle récursif lorsque les enfants existent...juste a la recherche rapide et ce post est parfait pour explication sporto.github.io/blog/2013/06/24/...
OriginalL'auteur charlietfl
J'ai trouvé une solution pour mon projet.
Ici c'est la section de routage
C'est le contrôleur principal pour l'affichage (categories.html) qui sera utilisé pour montrer notre coutume directive. J'ai créé un jeu de données de test appelé "treeFamily" que je vais utiliser pour tester la directive en ce contrôleur
Ici est la directive que nous allons utiliser pour parcourir récursivement notre base de données.
C'est une compilation de service que j'ai trouvé quelqu'un démonstration en ligne.
J'ai décidé de l'utiliser, car il se conserve notre code soignée et propre.
C'est le code html pour nos directive. Notez la façon dont nous sommes l'appel de la directive de l'intérieur de la directive.
Ici une partie de mes categories.html la page qui est la vue principale de mon contrôleur.
Le principal problème que j'ai, après j'ai eu le récursive directives de travail était que mon ng-click que j'ai ajouté à la directive du html a été de ne pas répondre lorsque vous cliquez dessus.
C'est parce que le champ d'application de la directive a été isolé portée.
Afin d'accéder à la principale méthode du contrôleur, vous devez lier la directive de la méthode à la méthode du contrôleur.
pour ce faire, vous devez ajouter le contrôleur de fonction que vous souhaitez lier à l'intérieur de la balise de ses'self.
c'est à dire:
et la directive isolées du champ d'application fait référence à cette
c'est à dire:
La a href intérieur de la directive sur l'html est en tant que tel:
noter que nous de référence de la directive sur la fonction de "produit", et non pas des produits, qui est le nom de la méthode sur le contrôleur que nous avons voulu l'accès à l'.
OriginalL'auteur David Pugh
La seule chose qui semble poser problème que vous n'avez pas à compiler le code HTML dans la directive. C'est une des raisons qui
ng-click
ne fonctionne pas car angulaire de ne pas voir ce changement.lorsque vous composez le:
essayer d'écrire quelque chose comme:
peut-être que ça va aider,
OriginalL'auteur Maxim Shoustin