AngularJS指令 - 編譯不起作用

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