如何将事件附加到链接功能中创建的dom

Question

我知道可以在模板函数中创建的dom可以附加到controller中的事件。

angular.module('app', [])
  .directive('appClick', function(){
     return {
       restrict: 'A',
       scope: true,
       template: '<button ng-click="click()">Click me</button> Clicked {{clicked}} times',
       controller: function($scope, $element){
         $scope.clicked = 0;
         $scope.click = function(){
           $scope.clicked++
         }
       }
     }
   });

由于模板中没有作用域，因此我必须使用链接功能。 同样如何在链接功能中实现。 喜欢：

 angular.module('app', [])
      .directive('appClick', function(){
         return {
           restrict: 'A',
           scope: true,
           link:function(scope, element, attrs){
  element.html('<button ng-click="click()">Click me</button> Clicked {{clicked}} times')
},
           controller: function($scope, $element){
             $scope.clicked = 0;
             $scope.click = function(){
               $scope.clicked++
             }
           }
         }
       });

如何在此处附加活动。

Answer 1

要在Angularjs某些DOM附加到现有DOM 。 首先，您必须在要使用模板的scope使用$compile服务对其进行$compile 。 这是因为模板包含Angular js模板语法。 以下是工作片段。

 var myApp = angular.module('myApp', []); myApp.controller('mainController', ['$scope', function($scope){ $scope.message = 'Welcome message'; }]) myApp.directive('myTemplate', ['$compile',function($compile) { return { restrict: 'A', scope: true, link: function(scope, element, attr) { var el = $compile('<button ng-click="click()">Click me</button> Clicked {{clicked}} times')(scope); element.append(el); scope.clicked = 0; scope.click = function(){ scope.clicked++ } } } }]) 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp"> <div ng-controller="mainController"> {{message}} <div my-template></div> </div> </div> 

Answer 2

 angular.module('app', [])
  .directive('appClick', function(){
     return {
       restrict: 'A',
       scope: true,
       link:function(scope, element, attrs){

           element.html('<button ng-click="click()">Click me</button> Clicked {{clicked}} times')

             scope.clicked = 0;
             scope.click = function(){
               scope.clicked++
             }
         }
       });

无需控制器即可实现。