AngularJS指令-编译不起作用

Question

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

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($compile){
  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 = $compile(dropdown)(scope);
      element.after(dropdown);
    }
  }
});

Answer 1

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($compile){
  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 = $compile(dropdown)(scope);
      element.after(dropdown);
    }
  }
});

see plunkr

Answer 2

You were very close. Compile template with $compile :

var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
    $scope.doSomething = function(){
      alert('d');
    };
})
.directive('myDir', function($compile){
  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($compile(dropdown)(scope));

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

Demo Plunker

comment

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

Answer 3

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($compile){
  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 = $compile(dropdown)(scope);
      element.after(dropdown);
    }
  }
});