Question

我有一个指令，只有在$compile.debugInfoEnabled()返回true时才会执行某些操作。

但是，$compile未定义：

angular
    .module('myapp', [])
    .directive('myDebugThing', [
        '$compile',
        function ($compile) {
            return {
                restrict: 'A',
                priority: Number.MAX_SAFE_INTEGER || Math.pow(2, 53) - 1,
                link: function (scope, element, attrs) {
                    // only run in local environment, not deployed ones
                    if (!$compile.debugInfoEnabled()) {
                        return;
                    }

                    // perform magic trick using element.isolateScope() and other stuff
                    ...
                }
            };
        }
    ])
;

我已尝试将[{1}}替换为$compile，但对于$compileProvider和undefined次注射都获得相同的$compile。

我想如何执行支票？

Answer 1

我在$compileProvider source中看到的内容debugInfoEnabled初始化后$compileProvider值不可用。

正如你设定的那样

$compileProvider.debugInfoEnabled(true)

你可以设置一个应用程序可访问的地方 - 我敢说全球（不要伤害我）。或者，争议稍微少一点，将调试信息存储在另一个具有公共debugInfoEnabled属性或功能的提供程序中。 请注意，我还没有测试过这段代码，只是为了明白。

＆＃13;

(function(app) {

  app.provider('debugInfoProvider', debugInfoProvider);

  function debugInfoProvider() {
    var _debugInfoEnabled = false;

    this.debugInfoEnabled = function debugInfoEnabled(enabled) {
      _debugInfoEnabled = enabled;
    };

    this.$get = function() {
      return {
        isDebugInfoEnabled: function() {
          return _debugInfoEnabled;
        }
      };
    }
  }

  app.config(config);

  function config(debugInfoProvider, $compileProvider) {
    var debugInfoEnabled = true;
    debugInfoProvider.debugInfoEnabled(debugInfoEnabled);
    $compileProvider.debugInfoEnabled(debugInfoEnabled);
  }

  app.directive('myDebugThing', [
    '$compile',
    function(debugInfo) {
      return {
        restrict: 'A',
        priority: Number.MAX_SAFE_INTEGER || Math.pow(2, 53) - 1,
        link: function(scope, element, attrs) {
          // only run in local environment, not deployed ones
          if (!debugInfo.isDebugInfoEnabled()) {
            return;
          }
        }
      };
    }
  ])

}(angular.module('app')));

＆＃13;

Answer 2

在documentation中，他们在模块的配置功能中使用 $ compileProvider 和 $ compile ：

<script>
  angular.module('compileExample', [], function($compileProvider) {
    // configure new 'compile' directive by passing a directive
    // factory function. The factory function injects the '$compile'
    $compileProvider.directive('compile', function($compile) {
      // directive factory creates a link function
      return function(scope, element, attrs) {
        scope.$watch(
          function(scope) {
             // watch the 'compile' expression for changes
            return scope.$eval(attrs.compile);
          },
          function(value) {
            // when the 'compile' expression changes
            // assign it into the current DOM
            element.html(value);

            // compile the new DOM and link it to the current
            // scope.
            // NOTE: we only compile .childNodes so that
            // we don't get into infinite loop compiling ourselves
            $compile(element.contents())(scope);
          }
        );
      };
    });
  })
  .controller('GreeterController', ['$scope', function($scope) {
    $scope.name = 'Angular';
    $scope.html = 'Hello {{name}}';
  }]);
</script>
<div ng-controller="GreeterController">
  <input ng-model="name"> <br/>
  <textarea ng-model="html"></textarea> <br/>
  <div compile="html"></div>
</div>

config 函数documentation说：使用此方法注册需要在模块加载时执行的工作。我理解为注册新指令使用编译器只能在那里完成..

在指令中使用$ compile

2 个答案: