1

我正在尝试将指令输出为javascript 字符串，以便可以将html放置在代码显示窗口中。我对实际代码而不是浏览器呈现的版本感兴趣，因为我正在向高级用户显示代码。所以我希望能够将指令函数注入服务或可能的页面控制器。

这将类似于 using$compile或什至$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 版本注入到服务中？

4

1 回答 1

2

根据您的需要，我可以提供 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>

于 2016-03-15T10:10:59.413 回答