javascript - 如何将事件附加到链接函数中创建的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 时。您首先必须在要使用模板的范围 上使用$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>