0

この質問をさらに説明する方法がわからない。だから簡単なコードとjsfiddleがあります

html

<div>
  <span format="the value is: {{value||'no-val'}}" value="100" my-test></span>
</div>

とジャバスクリプト

App.directive('myTest', function() {
  return {
      restrict: 'A',
      replace: true,
      scope: {
          format: '@'
      },
      template: "<span>{{format}}</span>",
      link: function($scope, element, attrs) {
          $scope.value = attrs.value
     }
  }
})

http://jsfiddle.net/VhvEy/2

私の期待<span>the value is: 100</span>

現実<span>the value is: no-val</span>

説明ありがとう！

4

1 に答える 1

1

補間するときはvalue、コントローラのスコープ プロパティを参照する必要があります。

ここに実用的なフィドルがあります。

したがって、コントローラーを追加する必要があります。

App.controller('Ctrl', function($scope) {

    $scope.value = 100;
})

ng-controllerコントローラーを次のように配線します。

<div ng-controller="Ctrl">

のvalueアトリビュートは<span>、角度スコープに自動的にバインドされません。

編集：

ディレクティブでテンプレートを補間したい場合は、ディレクティブcompile内の関数をオーバーライドできます。

App.directive('myTest', function($compile) {
    return {
        restrict: 'A',
        scope: {
            value: '@'
        },
        compile:function(element, attrs) {

            var strTemplate = "<span>{{" + attrs.format +"}}</span>";
            element.replaceWith(strTemplate);
        }
    }
})

これを行うには、html で補間しないでください。ディレクティブで補間したいテキストを送信するだけです。

<span format="value || 'no-val'" value="100" my-test></span>

これは、これが実際に機能していることを示す、適応された実用的なフィドルです。

于 2013-11-06T09:44:02.933 に答える