为什么 $compile 不能使用指令来处理服务？

Question

请看这个例子，因为它是解释问题的最佳方式。

在此示例中 如果您单击指令 link，它不会编译模板，而是将其显示为“{{1+1}}” .

另一方面，如果您单击 "Simple link"，它会编译模板并显示“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 link，以防你想使用代码： http://jsbin.com/vuzutipedu/edit?html,js,output

Answer 1

在 $get 中试试这个，而不是 $compile(template)($rootScope)

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

如果有效请告诉我

Answer 2

指令需要做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 - Integration with the browser event loop

演示

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="//unpkg.com/jquery"></script>
<script src="//unpkg.com/angular/angular.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>

为什么 $compile 不能使用指令来处理服务？

Why won't $compile work with service using a directive?

javascript

angularjs

angularjs-directive

angularjs-service

angularjs-compile

演示