6

私はhighlight.jsディレクティブを作成しようとしていますが、スコープ変数を適用するのに問題があります。

<script src="http://code.jquery.com/jquery-1.8.2.min.js" ></script>
<link rel="stylesheet" href="http://yandex.st/highlightjs/7.3/styles/default.min.css">
<script src="http://yandex.st/highlightjs/7.3/highlight.min.js"></script>

<div ng-app="app">
    <div ng-controller="MyCtrl">
        <snippet>&lt;script src=&quot;{{src}}&quot;&gt;&lt;/script&gt;</snippet>
        {{src}}
    </div>
</div>

</ p> 

function MyCtrl($scope) {
  $scope.src = "foo.js";   
}

app.directive('snippet', ['$timeout', function($timeout) {
    var template = '<pre><code></code></pre>';

    return {
        restrict: 'E',
        compile: function(tElement, tAttrs, transclude) {

            var rawCode = tElement.text();
            tElement.html(template);

            return function(scope, element, attrs) {
                $timeout(function() {
                    scope.$apply(function() {
                        var formattedCode = hljs.highlightAuto(rawCode);
                        $(element).find('code').html(formattedCode.value);
                    });
                }, 0);
            }
        }
    }
}]);​

これがフィドルです：http：//jsfiddle.net/dkrotts/RE7Jj/5/

ご覧のとおり、$scope.srcはスニペット内にその値を適用していません。私は何が間違っているのですか？

4

2 に答える 2

11

重要なのは、 $compileの代わりに$interpolateを使用することです。

$interpolate の説明

マークアップを含む文字列を補間関数にコンパイルします。このサービスは、データ バインディングのために HTML $compile サービスによって使用されます。補間マークアップの構成については、$interpolateProvider を参照してください。

$complie を使用すると、文字列が要素に変換されます。

$compile の説明

HTML 文字列または DOM の一部をテンプレートにコンパイルし、テンプレート関数を生成します。これを使用してスコープとテンプレートをリンクできます。

（正直、使ってみないと説明がよくわかりません。）

これが作業プランクです

app.controller('MainCtrl', function($scope) {
  $scope.cdnPath = "//path/to/cdn/";
  $scope.version = "1.0"; 
});

app.directive('snippet', ['$timeout', '$interpolate', function($timeout, $interpolate) {
    return {
        restrict: 'E',
        template:'<pre><code ng-transclude></code></pre>',
        replace:true,
        transclude:true,
        link:function(scope, elm, attrs){             
            var tmp =  $interpolate(elm.find('code').text())(scope);
             $timeout(function() {                
                elm.find('code').html(hljs.highlightAuto(tmp).value);
              }, 0);
        }
    };
}]);
于 2012-11-15T20:23:01.810 に答える
1

内部 HTMLを$compile する必要があります。以下のフィドルを参照してください。$apply ブロックで実行する必要もありません。

app.directive('snippet', ['$timeout', '$compile', function($timeout, $compile) {
    var template = '<pre><code></code></pre>';

    return {
        restrict: 'E',
        compile: function(tElement, tAttrs, transclude) {

            var rawCode = tElement.text();
            tElement.html(template);

            return function(scope, element, attrs) {

                var g = $compile(rawCode)(scope);

                $timeout(function() {
                    var text = g[0].outerHTML;
                        var formattedCode = hljs.highlightAuto(text);
                        $(element).find('code').html(formattedCode.value);
                }, 0);
            }
        }
    }
    }]);​

http://jsfiddle.net/roytruelove/jMC9n/1/

于 2012-11-14T20:01:19.233 に答える