ng-click is not working. Can someone help me, how to use the $pile?

I have created a plunker

// main.js
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {

})
.directive('myDir', function($pile){
  return {
    restrict: 'CAE',
    link: function(scope, element, attrs){
      var dropdown = '';
      dropdown += '<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="'+ attrs.id +'">';
      dropdown += '<li role="presentation"><a href="javascript:void(0);" ng-click="alert(\'a\')">Actions</a></li>';
      dropdown += '</ul>';
      //dropdown = $pile(dropdown)(scope);
      element.after(dropdown);
    }
  }
});

ng-click is not working. Can someone help me, how to use the $pile?

I have created a plunker http://plnkr.co/edit/AhxGYnOsJ7rPqcQquMfq?p=preview

// main.js
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {

})
.directive('myDir', function($pile){
  return {
    restrict: 'CAE',
    link: function(scope, element, attrs){
      var dropdown = '';
      dropdown += '<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="'+ attrs.id +'">';
      dropdown += '<li role="presentation"><a href="javascript:void(0);" ng-click="alert(\'a\')">Actions</a></li>';
      dropdown += '</ul>';
      //dropdown = $pile(dropdown)(scope);
      element.after(dropdown);
    }
  }
});

• javascript
• angularjs
• angularjs-directive

• please update the Plunker, there is no directive there – Maxim Shoustin Commented Dec 8, 2013 at 15:20
• Oopps.. I missed out. plunker link has been updated. – moustacheman Commented Dec 8, 2013 at 15:26

3 Answers 3

I would pull out the click function into your controller. There is no alert on your controller's scope so it does nothing. Also, I try to avoid lots of nested quotes if possible. A simple and clean refactor.

var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
    $scope.actionClick = function() {
        alert("a");
      }
})
.directive('myDir', function($pile){
  return {
    restrict: 'CAE',
    link: function(scope, element, attrs){
      var dropdown = '';
      dropdown += '<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="'+ attrs.id +'">';
      dropdown += '<li role="presentation"><a href="javascript:void(0);" ng-click="actionClick()">Actions</a></li>';
      dropdown += '</ul>';
      dropdown = $pile(dropdown)(scope);
      element.after(dropdown);
    }
  }
});

see plunkr

You were very close. Compile template with $pile:

var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
    $scope.doSomething = function(){
      alert('d');
    };
})
.directive('myDir', function($pile){
  return {
    restrict: 'CAE',
    link: function(scope, element, attrs){
      var dropdown = '';
      dropdown += '<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="'+ attrs.id +'">';
      dropdown += '<li role="presentation"><a href="#" ng-click="doSomething()">Actions</a></li>';
      dropdown += '</ul>';

      var a_input = angular.element($pile(dropdown)(scope));

      element.append(a_input);
    }
  }
});

Demo Plunker

ment

AngularJS doesn't know about alert. If you want to call it from HTML, override it like @udidu showed.

When you're using ng-click the ng-click directive searche for the expression in the current scope. Since their is no alert function on the directive's scope (or it's parent scope) then nothing happen.

You can add the alert function on your scope like so:

.directive('myDir', function($pile){
  return {
    restrict: 'CAE',
    link: function(scope, element, attrs){


          // add the alert function on the scope
          scope.alert = function(param) {
              alert(param);
          }


      var dropdown = '';
      dropdown += '<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="'+ attrs.id +'">';
      dropdown += '<li role="presentation"><a href="javascript:void(0);" ng-click="alert(\'a\')">Actions</a></li>';
      dropdown += '</ul>';
      dropdown = $pile(dropdown)(scope);
      element.after(dropdown);
    }
  }
});