Question

ng-click无效。有人可以帮助我，如何使用$compile？

我创建了一个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

我会将点击功能拉出到你的控制器中。控制器范围内没有alert因此它什么都不做。另外，如果可能的话，我尽量避免使用大量嵌套引号。一个简单而干净的重构器。

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

你非常接近。使用$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);
    }
  }
});

演示 Plunker

AngularJS不了解alert。如果你想从HTML中调用它，请像@udidu显示一样覆盖它。

Answer 3

当您使用ng-click ng-click指令搜索当前作用域中的表达式时。由于它们在指令的范围（或它的父范围）上没有alert函数，所以没有任何事情发生。

您可以在示波器上添加alert功能，如下所示：

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

AngularJS指令 - 编译不起作用

3 个答案: