在指令中使用$ compile

我有一個指令，只有當$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 
        ... 
       } 
      }; 
     } 
    ]) 
;

我試着更換$compile是$compileProvider但得到的兩個$compile和$compileProvider注射相同undefined。

我想如何執行我的支票？

來源

2015-06-23 core

提供程序將不會在內部指令..這真是個好問題和有趣的問題.. –

從我在$compileProvider source中看到的debugInfoEnabled值在$compileProvider初始化後不可用。

由於它的東西，你設置

$compileProvider.debugInfoEnabled(true)

你能設置到應用程序訪問的地方 - 我敢說一個全球性的（不要傷害我）。或者，在另一個提供商擁有公開debugInfoEnabled財產或功能的商店調試信息中存在一些稍微有爭議的問題。 請注意，我沒有測試過這個代碼，它只是爲了得到。

(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')));

來源

2015-06-23 15:31:21 glennanthonyb

這是一個很好的解決方案。如果我無法在'link（）'中獲得'$ compile'，這是我唯一能想到的。 – core

-1

在documentation他們使用$ compileProvider和$在模塊的配置功能彙集：

<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說：使用此方法註冊需要在模塊加載時執行的工作。我的理解是註冊一個與編譯器一起工作的新指令只能在那裏完成。

來源

2015-06-23 15:51:18 TekTimmy

在指令中使用$ compile

回答

相關問題