Warum funktioniert $ compile nicht mit dem Dienst, der eine Direktive verwendet?

Question

Bitte schauen Sie sich dieses Beispiel an, da es das Problem am besten erklärt.

In diesem Beispiel Wenn Sie auf den Link der Anweisung klicken, wird die Vorlage nicht kompiliert, sondern als "{{1 + 1}}" angezeigt.

Auf der anderen Seite Wenn Sie auf den "Simple Link" klicken kompiliert die Vorlage und zeigt "2" statt.

angular.module('myApp', []) 
 
    .provider('$popup', function() { 
 
     var service = {}; 
 

 
     this.$get = ['$compile', '$rootScope', function($compile, $rootScope) { 
 
      var template = $('<div>{{1+1}}</div>'); 
 
      service.go = function() { 
 
       $(document.body).append(template); 
 
       $compile(template)($rootScope); 
 
      } 
 
      return service; 
 
     }]; 
 
    }) 
 
    .directive('popupLink', ['$popup', function($popup) { 
 
     return { 
 
      restrict: 'A', 
 
      scope: {}, 
 
      link: function link(scope, element, attrs) { 
 
       element.click(function() { 
 
        $popup.go(); 
 
        return false; 
 
       }); 
 
      } 
 
     }; 
 
    }]) 
 
    .controller('mainCtrl', ['$scope', '$popup', function($scope, $popup) { 
 
     $scope.go = function() { 
 
      $popup.go(); 
 
     }; 
 
    }])

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> 
 

 
<div ng-app="myApp" ng-controller="mainCtrl"> 
 
    <a ng-href="/test" popup-link>Directive link</a> 
 
    <a href="#" ng-click="go()">Simple link</a> 
 
</div>

ist meine Frage, warum nicht das ist template mit der Richtlinie kompilieren? (aber es ist in der Steuerung)

Und wie kann ich es beheben, so dass es in der Richtlinie auch kompiliert?

P.S. Hier ist die jsbin Link, falls Sie mit dem Code spielen, um möchten: http://jsbin.com/vuzutipedu/edit?html,js,output

Answer 1

arbeitet Die Richtlinie muss scope.$apply();

link: function link(scope, element, attrs) { 
    element.click(function() { 
     $popup.go(); 
     //ADD apply 
     scope.$apply(); 
     return false; 
    }); 

Der Click-Ereignishandler wird außerhalb des AngularJS-Frameworks ausgeführt. Ein Framework Digest-Zyklus muss ausgeführt werden, um den Watcher für die {{1+1}} Interpolation auszuführen.

Es funktioniert mit der ng-click Direktive, weil diese Richtlinie scope.$apply enthält.

- AngularJS Developer Guide (v1.1) - Concepts - Runtime

angular.module('myApp', []) 
 
    .provider('$popup', function() { 
 
     var service = {}; 
 

 
     this.$get = ['$compile', '$rootScope', function($compile, $rootScope) { 
 
      var template = $('<div>{{1+1}}</div>'); 
 
      service.go = function() { 
 
       $(document.body).append(template); 
 
       $compile(template)($rootScope); 
 
      } 
 
      return service; 
 
     }]; 
 
    }) 
 
    .directive('popupLink', ['$popup', function($popup) { 
 
     return { 
 
      restrict: 'A', 
 
      scope: {}, 
 
      link: function link(scope, element, attrs) { 
 
       element.click(function() { 
 
        $popup.go(); 
 
        //ADD apply 
 
        scope.$apply(); 
 
        return false; 
 
       }); 
 
      } 
 
     }; 
 
    }]) 
 
    .controller('mainCtrl', ['$scope', '$popup', function($scope, $popup) { 
 
     $scope.go = function() { 
 
      $popup.go(); 
 
     }; 
 
    }])

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> 
 

 
<div ng-app="myApp" ng-controller="mainCtrl"> 
 
    <a ng-href="/test" popup-link>Directive link</a> 
 
    <a href="#" ng-click="go()">Simple link</a> 
 
</div>

Answer 2

dieses Versuchen in $get, statt $compile(template)($rootScope)

$compile(angular.element(template))(angular.element(template).scope());

Lassen Sie mich wissen, ob es