1

メインのhtmlテンプレート要素にアクセスする正しい角度の方法は何だろうと思っています。getelementbyid を使用でき、attr.$$element[0] を使用してアクセスすることもできますが、よりクリーンな方法があるかどうか疑問に思っています。以下の例では、getElementById 行に相当するものが必要です。

var app = angular.module('test', []);
app.directive('test', function(){
  return {
    restrict: 'E',
    template: '<canvas id="test-canvas"></canvas>',
    replace: true,
    link: function(scope, elem, attr) {
      // what is angular way of doing this?
      var canvas = initCanvas(document.getElementById("test-canvas")),
      // this works - is this recommended method?
      var canvas = attr.$$element[0];

    }
  };
});
4

1 に答える 1

1

elem次のように param を使用する必要があります。

var canvas = elem;

コメントで言及されているように、jqLite (jQuery)ラップされた要素です。

また

var canvas = elem[0];

生の要素を取得します。

子要素にアクセスして何かをしたい場合は、 を使用する必要がありますangular.element。Angular の使用jqLite、制限されたjQueryメソッドを提供します。ここでさらに読むことができます: Angular の jqLit​​e。たとえば、タグ名セレクターでのみjqLite使用できるためfind()、id で子を選択する場合は、次のようなものを使用する必要があります。

angular.element(elem[0].querySelector('#your_child')).bind('click', () => {
  elem.toggleClass('some_class');
}

jQuery を使用している場合は、 を使用できますfind()。コードは次のようになります。

elem.find('#your_child').click(() => {
    elem.toggleClass('some_class');
});

試してconsole.log(elem)みると、それが何であるかがわかります。お役に立てれば！

ng-repeatPS:ディレクティブから子要素を選択したいとしましょう。これらの要素がまだ存在しないため、以前のソリューションは機能しません。あなたがする必要があるのは、$timeout次のように追加することだけです：

function yourDirective($timeout) {
  return {
    ...
    link: function (scope, elem, attrs) {
      $timeout(() => {
        angular.element(elem[0].querySelectorAll('.your_child')).bind('click', () => {
          // Do something
        }
      });
    }
  }
}

angular
  .module('yourApp')
  .directive('yourDirective', yourDirective);
于 2016-06-13T17:03:09.407 に答える