Почему не будет компилировать работу с сервисом с помощью директивы?

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. Вот ссылка jsbin в случае, если вы хотите играть с кодом: http://jsbin.com/vuzutipedu/edit?html,js,output

Answer 1

Директиве необходимо сделать scope.$apply();

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

Обработчик события щелчка выполняется вне рамки AngularJS. Для выполнения наблюдения для интерполяции {{1+1}} необходимо выполнить цикл дайджеста каркаса.

Он работает с директивой ng-click, поскольку эта директива включает в себя scope.$apply.

- 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

Try это в $get, вместо $compile(template)($rootScope)

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

Позвольте мне знать, если он работает