AngularJS ng-click non-calling function by scope

Question

I have a custom directive that loads a navigation block from a webservice call. I am trying to click on one of these navigation links in which I entered "ng-click". I am trying to click a link that should call a function called inside ng-click. This function should be performed, but it is not.

Here is my routing

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

Here is a custom 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;



                }

            }
        };
    });

Here is a controller that redirects to my html fragment to which I am showing the 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;
          });

      }

  }]);

Here is a code snippet from category.html that contains a custom 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 />

I tried changing the javascript method called inside ng-click to: ng-click = "getProductsForCategory".

both results cause the getProductsForCategory method not to be called when the link is clicked

- , ?

,

* , , . - , html-

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

, , div. , , 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 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>

---

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

---

, , , , ng-click, html, . , .

, . , . :

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

..:

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

a href html :

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

, "", , , .

Answer 2

ng-click

ng-click="getProductsForCategory"

ng-click="getProductsForCategory()"

Answer 3

, , HTML . , ng-click , angular .

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

, ,