0

モデルをディレクティブの属性にバインドしようとしています。

Javascript-

function Main($scope) {
    $scope.text = "abc"
};

angular.module("myApp", [])
.directive("load", function ($compile) {
    return {
        restrict: 'E',
        replace: true,
        link: function (scope, element, attrs) {
           console.log(attrs);
           element.html(someFunction(attrs.text));
        }
    };
});

HTML-

<div ng-controller="Main">
    <load text="Hello {{text}}"></load>
</div>

jsFiddleはここにあります。フィドルでは、私はを廃止しましたsomeFunction。

4

2 に答える 2

3

これは、ディレクティブ内からスコープに到達するための5つの異なる方法を示す簡単なプランクです。最後のものはあなたが望むものです：http：//plnkr.co/edit/e2mMAq

于 2013-03-11T15:57:42.063 に答える
1

あなたがやろうとしていることに基づいて、2つの変更を加える必要があります。

  1. replaceをtrueに設定したので、おそらくコードにテンプレートを追加して、要素を新しいマークアップに置き換える必要があります。

  2. リンクフェーズが発生した時点では、補間はまだ評価されていないため、変更を探すために属性を観察する必要があります。

      angular.module('myApp', [])
      .directive('load', function($compile) {
          return {
              restrict: 'E',
              replace: true,
              link: function (scope, element, attrs) {
                  console.log(attrs);
                  element.html(attrs.text);

                  attrs.$observe('text', function(value) {
                      console.log('new value = ' + value);
                      element.html(value);
                  });
              }

          };
      });

詳細については、補間された属性を観察するセクションを参照してください。

于 2013-03-11T15:53:18.973 に答える