0

ディレクティブ内でテンプレートをカスタマイズし、親スコープに属性への参照を含めようとしています。私はAngularにかなり慣れていませんが、かなりの検索を行い、 Directive 内でテンプレートをカスタマイズすることに基づいて試みました。ただし、親スコープ変数への参照をディレクティブの属性として渡すと、おそらくコンパイル関数が呼び出された時点でまだ定義されていないため、解決されません。

私のディレクティブ定義は次のようになります。

app.directive('sectionHeader', function() {
  return {
    restrict: 'EC',
    replace: true,
    transclude: true,
    scope: {sectionName:'@sectionName', imageUrl:'@imageUrl'},
    compile: function(element, attrs) {
      var imageHtml = attrs.hasOwnProperty('imageUrl') ? '<div style="float: left; padding-right: 5px;"><img class="float_left" src="' + attrs.imageUrl + '" alt=""/></div>' : '';
      var htmlText =
        '<div>' + imageHtml + '<h1 class="float-left">' + attrs.sectionName + '</h1>' +
        '<div class="clear"></div>' +
        '<div class="modal_hr"></div></div>';
      element.replaceWith(htmlText);
    },
  };
});

そして、私は次のようなディレクティブを使用しています:

 <div class="section-header" section-name="{{currentFeatureName}}"></div>

問題は、ディレクティブでコンパイル関数が呼び出されたときに、コントローラーの {{currentFeatureName}} 変数が定義されていないように見えることです。

これを回避するために私が考えた 1 つの方法は、コンパイル関数内で、変更を検出したときに h1 要素のコンテンツを更新する sectionName 属性にオブザーバー関数を設定することです。これは少し不格好に思えます。これを行うためのより良い、またはよりエレガントな方法があるかどうか疑問に思っていました。

4

2 に答える 2

1

Directive docs$observeで関数を確認してください。

しかし、それ以外に、あなたがやろうとしていたことを実際に行う必要はないようです. 見る：

var app = angular.module('plunker', []);
app.controller('AppController',
    [
      '$scope',
      function($scope) {
        $scope.currentFeatureName = 'Current Feature Name';
        $scope.imageUrl = "https://lh3.googleusercontent.com/GYSBZh5RpCFwTU6db0JlHfOr_f-RWvSQwP505d0ZjWfqoovT3SYxIUPOCbUZNhLeN9EDRK3b2g=s128-h128-e365";
      }
    ]
  );

app.directive('sectionHeader', function() {
  return {
    restrict: 'EC',
    replace: true,
    transclude: true,
    scope: {
      sectionName:'@',
      imageUrl:'@'
    },
    template: '<div><div style="float: left; padding-right: 5px;" ng-show="imageUrl"><img class="float_left" ng-src="{{imageUrl}}" alt=""/></div><h1 class="float-left">{{sectionName}}</h1><div class="clear"></div><div class="modal_hr"></div></div>'
  };
});

HTML:

<div ng-controller="AppController">
  <div class="section-header" section-name="{{currentFeatureName}}" image-url="{{imageUrl}}"></div>
</div>

プランカー。

于 2013-03-07T21:00:20.273 に答える