AngularJS指令-編譯不起作用

Question

ng-click不起作用。 有人可以幫我，如何使用$compile嗎？

我已經創建了一個矮人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);
    }
  }
});

見朋克

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

演示柱塞

評論

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