可以将指令 $compiler 注入服务吗？

Question

我正在尝试在代码显示 window 中输出一个 directive as a javascript string so that I can place the html。我对实际代码而不是浏览器呈现的版本感兴趣，因为我要向高级用户显示代码。所以我希望能够将指令函数注入到服务或可能是页面控制器中。

这类似于使用 $compile or perhaps even $interpolate，但用于特定指令。我想我已经定义了指令，我很有可能以某种方式访问 html 生成函数。我知道您可以在指令定义中定义控制器，但我正在寻找在服务或页面控制器中使用的解决方案。

因此，举个例子，假设我在模块中定义了一个指令

mod.directive("superThing", function() {
        return {
            templateUrl: "/superThing.html",
            scope: {
               variableA: "="
            }
        };
    });

前服务：

 mod.service("applicationService", [ "$rootScope", "superThing",
        function ($rootScope, superThing) {
          $rootScope.result = superThing($rootScope);
       }
]);

_{（我知道像这样使用 $rootScope 很奇怪，但我只是想想出一个简短的例子。）}

示例页面模板：

<fieldset>
  <legend>Preview:</legend>
  <div data-super-thing data-variable-a="false">
  </div>
</fieldset>
<fieldset>
   <legend>Code output:</legend>
   <textarea rows="4" cols="50" data-code-mirror="{{result}}">
   </textarea>
</fieldset>

是否有办法将指令或类似指令的内部 $compiled 版本注入服务？

Answer 1

根据你的需要，我可以提供4种选择：

正在使用服务手动创建指令。
正在创建一个指令，它将在变量中记录您的 html。
创建一个通用指令，它将通过事件报告 $emit 报告其内容 html.
创建一个通用指令，它将在变量中记录您的 html（我认为这是首选解决方案。）

jsfiddle.

上的实例

angular.module('ExampleApp', [])
  .controller('ExampleController', function($scope, compileDirective) {
    $scope.valueShow = 1234567;
    $scope.array = [1, 23, 4, 5, 9, 6];
    
    $scope.addInArray = function(){
      $scope.array.push(Math.random());
    }
    
    var elem = compileDirective.get(myDirective, {
      val: 1234
    });
    console.log('Compiled by Service', elem);


    $scope.$on('show-compile.html-changed', function(event, value) {
      console.log('html from show-cimpile', value);
    });


  })
  .service('compileDirective', function($compile, $rootScope) {
    return {
      get: function(directiveFn, scope) {
        var directive = myDirective();
        directive.scope = $rootScope.$new(false);
        for (var k in scope)
          directive.scope[k] = scope[k];
        return $compile(directive.template)(directive.scope);
      }
    };
  })
  .directive('myDirective', myDirective)
  .directive('showCompileEvent', function() {
    return {
      restrict: "A",
      link: function(scope, elem) {
        scope.$watch(function() {
          return elem.html();
        }, function(val) {
          scope.$emit('show-compile.html-changed', val);
        });
      }
    };
  }) 
  .directive('showCompile', function() {
    return {
      restrict: "A",
      scope:{showCompile:"="},
      link: function(scope, elem) {
        scope.$watch(function() {
          return elem.html();
        }, function(val) {
          scope.showCompile = val;
        });
      }
    };
  })
  .directive('myDirectives', function() {
    return {
      restrict: "EA",
      replace: true,
      scope: {
        val: "=",
        htmlVal:"="
      },
      template: "<div><b>{{val}}</b></div>",
      link: function(scope, elem) {
        scope.$watch(function() {
          return elem.html();
        }, function(val) {
          scope.$emit('my-directive.html-changed', val);
          scope.htmlVal = val;
        });
      }
    };
  });

function myDirective() {
  return {
    restrict: "EA",
    replace: true,
    scope: {
      val: "="
    },
    template: "<div>{{val}}</div>",
  };

}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="ExampleApp">
  <div ng-controller="ExampleController">
    <my-directive val="valueShow"></my-directive>
    <my-directives val="valueShow" html-val="selfHTML"></my-directives>
    Html for my-directives <pre>{{selfHTML}}</pre>
    <my-directive show-compile-event val="valueShow"></my-directive>
    <button ng-click="addInArray()">
     add in array
    </button>
    <div show-compile="htmlFromNgRepeat">
      <div ng-repeat="a in array">
        {{a}}
      </div>
    </div>
    <pre>{{htmlFromNgRepeat}}</pre>
  </div>
</div>

可以将指令 $compiler 注入服务吗？

Can one inject a directive $compiler into a service?

angularjs

angularjs-directive

angularjs-service

angularjs-controller

angularjs-injector