ディレクティブを使用してサービスで$コンパイルが動作しないのはなぜですか？

Question

問題を説明する最良の方法であるので、この例を見てください。

この例では、ディレクティブリンクをクリックするとテンプレートはコンパイルされず、代わりに "{{1 + 1}}"と表示されます。

「シンプルリンク」をクリックすると、テンプレートがコンパイルされ、代わりに「2」と表示されます。

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>

ディレクティブでコンパイルtemplateない理由私の質問はありますか？ （コントローラではありますが）

そして、指示文でもコンパイルするにはどうしたらいいですか？

P.S.代わりに$compile(template)($rootScope)

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

の http://jsbin.com/vuzutipedu/edit?html,js,output

Answer 1

を動作するかどうか、私に教えてください：ここでは、コードで遊んしたい場合はjsbinリンクがありますこの指令はscope.$apply()を実行する必要があります。

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

クリックイベントハンドラは、AngularJSフレームワークの外側で実行されます。 {{1+1}}補間のためにウォッチャーを実行するには、フレームワークダイジェストサイクルを実行する必要があります。

この指令にはscope.$applyが含まれているため、ng-click指令で動作します。

から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

は$getでこれを試してみてください、それは