Javascript AngularJS指令-编译不起作用

ng单击

无效。有人能帮助我，如何使用

$compile

我创造了一个劫掠者

//main.js
var-app=angular.module（'myApp'，['ngGrid']）；
应用程序控制器（'MyCtrl'，函数（$scope）{
})
.directive（'myDir'，函数（$compile）{
返回{
限制：“CAE”，
链接：函数（范围、元素、属性）{
var下拉列表=“”；
dropdown+='
；
下拉菜单+='
；
下拉菜单+='
'；
//下拉菜单=$compile（下拉菜单）（范围）；
元素。之后（下拉列表）；
}
}
});

你们非常接近。使用

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

var-app=angular.module（'myApp'，['ngGrid']）；
应用程序控制器（'MyCtrl'，函数（$scope）{
$scope.doSomething=函数（）{
警报（'d'）；
};
})
.directive（'myDir'，函数（$compile）{
返回{
限制：“CAE”，
链接：函数（范围、元素、属性）{
var下拉列表=“”；
dropdown+='
；
下拉菜单+='
；
下拉菜单+='
'；
var a_input=angular.element（$compile（dropdown）（scope））；
元素。追加（a_输入）；
}
}
});

演示

评论

---

AngularJS不知道有关

警报的信息。如果您想从HTML调用它，请像@udidu显示的那样覆盖它。
您非常接近。使用
$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);
    }
  }
});

var-app=angular.module（'myApp'，['ngGrid']）；
应用程序控制器（'MyCtrl'，函数（$scope）{
$scope.doSomething=函数（）{
警报（'d'）；
};
})
.directive（'myDir'，函数（$compile）{
返回{
限制：“CAE”，
链接：函数（范围、元素、属性）{
var下拉列表=“”；
dropdown+='
；
下拉菜单+='
；
下拉菜单+='
'；
var a_input=angular.element（$compile（dropdown）（scope））；
元素。追加（a_输入）；
}
}
});

演示

评论

AngularJS不知道有关
警报的信息。如果要从HTML调用它，请像@udidu show那样重写它。
当您使用
ng click
ng click指令搜索当前范围内的表达式时。由于它们在指令的作用域（或其父作用域）上没有
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);
    }
  }
});

指令（'myDir'，函数（$compile）{
返回{
限制：“CAE”，
链接：函数（范围、元素、属性）{
//在作用域上添加警报功能
scope.alert=函数（参数）{
警报（参数）；
}
var下拉列表=“”；
dropdown+='
；
下拉菜单+='
；
下拉菜单+='
'；
下拉菜单=$compile（下拉菜单）（范围）；
元素。之后（下拉列表）；
}
}
});
使用
ng click
ng click指令搜索当前范围内的表达式。由于它们在指令的作用域（或其父作用域）上没有
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);
    }
  }
});

指令（'myDir'，函数（$compile）{
返回{
限制：“CAE”，
链接：函数（范围、元素、属性）{
//在作用域上添加警报功能
scope.alert=函数（参数）{
警报（参数）；
}
var下拉列表=“”；
dropdown+='
；
下拉菜单+='
；
下拉菜单+='
'；
下拉菜单=$compile（下拉菜单）（范围）；
元素。之后（下拉列表）；
}
}
});

我会将单击功能拉到您的控制器中。控制器的作用域上没有

警报

，因此它不会执行任何操作。此外，如果可能的话，我尽量避免使用大量嵌套引号。一个简单而干净的重构

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

var-app=angular.module（'myApp'，['ngGrid']）；
应用程序控制器（'MyCtrl'，函数（$scope）{
$scope.actionClick=function（）{
警报（“a”）；
}
})
.directive（'myDir'，函数（$compile）{
返回{
限制：“CAE”，
链接：函数（范围、元素、属性）{
var下拉列表=“”；
dropdown+='
；
下拉菜单+='
；
下拉菜单+='
'；
下拉菜单=$compile（下拉菜单）（范围）；
元素。之后（下拉列表）；
}
}
});

---

我会将单击功能拉到您的控制器中。控制器的作用域上没有

警报

，因此它不会执行任何操作。此外，如果可能的话，我尽量避免使用大量嵌套引号。一个简单而干净的重构

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

var-app=angular.module（'myApp'，['ngGrid']）；
应用程序控制器（'MyCtrl'，函数（$scope）{
$scope.actionClick=function（）{
警报（“a”）；
}
})
.directive（'myDir'，函数（$compile）{
返回{
限制：“CAE”，
链接：函数（范围、元素、属性）{
var下拉列表=“”；
dropdown+='
；
下拉菜单+='
；
下拉菜单+='
'；
下拉菜单=$compile（下拉菜单）（范围）；
元素。之后（下拉列表）；
}
}
});

---

请更新Plunker，没有关于Loopps的指令。。我错过了。plunker链接已更新。请更新plunker，没有关于Loopps.的指令。。我错过了。plunker链接已更新。感谢您的帮助。是<