AngularJS ng-click не вызывающая функция в области

Question

У меня есть настраиваемая директива, которая загружает блок навигации из вызова webservice. Я пытаюсь щелкнуть по одной из этих ссылок навигации, в которую я помещаю «ng-click». Я пытаюсь щелкнуть ссылку, которая должна вызывать функцию, называемую внутри ng-click. Эта функция должна выполняться, но это не так.

Вот маршрутизации

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

Вот мой обычай директиве

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; 



       } 

      } 
     }; 
    }); 

Вот контроллер, который получает это направляется на мой HTML-фрагмент, который я показываю директиву в.

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

     } 

    }]); 

Вот фрагмент кода из категорий.html, который содержит пользовательскую директиву:

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

Я попытался изменить яваскрипт метода, называемый внутри нг щелчка, чтобы быть похожими на: нг-клик = «getProductsForCategory», а также.

оба результата в методе не getProductsForCategory вызывается при щелчке на ссылке

Кто-нибудь есть какие-либо идеи, что моя проблема?

спасибо,

Дэвид

EDITED INFO * Эй, ребята, спасибо за глядя на эту проблему. Это продолжается до сих пор, но я добавил дополнительный тест на мой HTML-фрагмент для моей пользовательской директивы

<div ng-bind-html="panes"></div> 
<a href="javascript:void(0);" ng-click="getProductsForCategory()">testing</a> 

Перед единственная линия была первым тегом, который был Дивым. Я добавил вторую строку, чтобы увидеть, возможно ли это связывание html непосредственно с тегом div в директиве или если возникла проблема с конфигурацией директивы в другом месте.

Второй тег, который я добавил, должен быть стандартным действием ng-click. мой второй тег href делает вызов функции getProductsForCategory(). Таким образом, похоже, это связано с привязкой моей строки html к элементу div для директивы.

Проблема в том, что моя структура навигации, которую я создаю, может иметь бесконечные вложенные дочерние элементы (это в основном поле выбора suckerfish).

Это означает, что я должен использовать рекурсию, чтобы наметить каждый родитель ДЕТСКИМ навигацию структуры ... в директиве ...

Answer 1

Я придумал решение для моего проекта. Вот раздел маршрутизации

var cartangularPublicShoppingApp = angular.module('cartangularPublicShoppingApp', [ 
    'ngRoute', 
    'CategoriesController', 
    'CategoryServices', 
    'CategoryNavigationServices', 
    'MenuModule' 
]); 
cartangularPublicShoppingApp.config(['$routeProvider', 
    function($routeProvider) { 
     $routeProvider. 
      when('/categories/:categoryId', { 
       templateUrl: 'partials/public/categories.html', 
       controller: 'CategoriesController' 
      }) 
    }] 
); 

---

Это главный контроллер для представления (categories.html), который будет использоваться, чтобы показать нашу пользовательскую директиву. Я создал тестовый набор данных под названием «treeFamily», который я буду использовать, чтобы проверить директиву в этом контроллере

var categoriesControllers = angular.module('CategoriesController', []); 

categoriesControllers.controller('CategoriesController', ['$scope', '$routeParams' , '$location', 'CategoryService', 
    function($scope, $routeParams, $location, CategoryService) { 

     $scope.treeFamily = { 
      name : "Clothes", 
      categoryId : "4", 
      children: [{ 
       name : "Clothes", 
       categoryId : "3", 
       children: [{ 
        name : "Men's Clothes", 
        categoryId : "2", 
        children: [] 
       },{ 
        name : "Jackets", 
        categoryId : "1", 
        children: [ 
         { 
          name : "Light Jackets", 
          categoryId : "4", 
          children: [{ 
           name : "Natural Material", 
           children: [] 
          } 
          ] 
         },{ 
          name : "Heavy Jackets", 
          categoryId : "3", 
          children: [] 
         }] 
       }, { 
        name: "Pants", 
        categoryId : "4", 
        children: [] 
       }] 
      }] 
     } 

---

Вот директива, что мы будем использовать, чтобы рекурсивно пройти наш набор данных.

angular.module('MenuModule', []) 
.directive("tree", function(RecursionHelper) { 
    return { 
     restrict: "E", 
     scope: { 
      family: '=', 
      'product': '&products' 
     }, 

     templateUrl: './partials/public/family.html', 
     compile: function(element) { 
      return RecursionHelper.compile(element); 
     } 
    }; 
}) 

---

Это услуга компилирование, что я нашел кого-то демонстрации в Интернете. Я решил использовать его, поскольку он сохраняет наш код аккуратным и чистым.

var categoryNavigationServices = angular.module('CategoryNavigationServices', []); 
categoryNavigationServices.factory('RecursionHelper', ['$compile', function($compile){ 
    var RecursionHelper = { 
     compile: function(element){ 
      var contents = element.contents().remove(); 
      var compiledContents; 
      return function(scope, element){ 
       if(!compiledContents){ 
        compiledContents = $compile(contents); 
       } 
       compiledContents(scope, function(clone){ 
        element.append(clone); 
       }); 
      }; 
     } 
    }; 

    return RecursionHelper; 
}]); 

---

Это фрагмент HTML для нашей директивы. Обратите внимание, как мы вызываем директиву из директивы.

<a href="javascript:void(0);" name="categoryId" ng-click="product(family.categoryId)">{{ family.name }}</a> 
<ul> 
    <li ng-repeat="child in family.children"> 
     <tree family="child" products="products(child.categoryId)"></tree> 
    </li> 
</ul> 

---

Вот часть моей страницы categories.html, которая является основным видом из моего контроллера.

<ul> 
      <li ng-repeat="object in treeFamily.children"> 
       <a href="javascript:void(0);" name="categoryId" ng-click="products(object.categoryId)">{{object.name}}</a> 
       <ul> 
        <li ng-repeat="child in object.children"> 
         <tree family="child" products="products(child.categoryId)"></tree> 

        </li> 
       </ul> 
      </li> 
    </ul> 

---

Основная проблема у меня была после того, как я получил рекурсивные директивы работы было то, что мой нг-клик, что я добавил из HTML директивы не реагирует при нажатии. Это было связано с тем, что область действия директивы была изолированной областью.

Чтобы получить доступ к методу основного контроллера, вам необходимо привязать метод директивы к методу контроллера. , для этого вам нужно добавить функцию контроллера, которую вы хотите привязать внутри тега. т.е.

<tree family="child" products="products(child.categoryId)"> 

и ссылки изолированных сфер применения директивы в этом именно:

scope: { 
      family: '=', 
      'product': '&products' 
     }, 

The A HREF внутри HTML в директивах является как таковым:

<a href="javascript:void(0);" name="categoryId" ng-click="product(family.categoryId)">{{ family.name }}</a> 

отметить, что мы ссылаемся на директива «продукт», а не продукты, которая является именем метода на контроллере, к которому мы хотели получить доступ.

Answer 2

Единственное, что кажется проблематичным, что вы не компилировать HTML в директиве. Это является причиной того, что ng-click не работает, потому что угловой не видит этого изменения.

var string = '<li> <a href="" name="categoryId" ng-click="getProductsForCategory()">' + currentCategoryNavigation.categoryName + "</a>"; 

, когда вы звоните:

var navHTML = createCategoryNavigationBar(data); 

попытка написать что-то вроде:

var temp = createCategoryNavigationBar(data); 
var navHTML = angular.element(temp)($scope)); 

может быть, это поможет,

Answer 3

Вы пропускаете набор скобок в ng-click разметки

ng-click="getProductsForCategory"

Должно быть

ng-click="getProductsForCategory()"