3

(潜在的に) より複雑な dom 要素を生成するための単純なディレクティブを作成しようとしていました。ここで何が起こっているのかかなり混乱していますが、ディレクティブ内で使用するディレクティブが最初にリンクされると思いますか? とにかく、私が生成している要素は、本来あるべき場所に表示されません。

混乱してすみません。plunkr は次のとおりです: http://plnkr.co/edit/vWxTmA1tQ2rz6Z9dJyU9?p=preview

4

2 に答える 2

3

ディレクティブ内で使用するディレクティブが最初にリンクされると思いますか?

はい。子ディレクティブのリンク関数は、親のリンク関数の前に実行されます。

これは、ネストされた 2 つのディレクティブを示すフィドルです。

<div d1>
  <div d2></div>
</div>

ディレクティブのコントローラーとリンク関数が呼び出されたときにログに記録します。

Plunker にはいくつかの問題があります。

分離スコープに使用@しているため、属性値に {{}} を使用する必要があります。

<visible value='{{visible}}'>plop</visible>
<invisible value='{{visible}}'>plop</invisible>

はコントローラーで定義されているため$scope.visible、 ではなくその値を使用するつもりだったと思いますtest。

ディレクティブでは、リンク関数でinvisibleアイソレート スコープ プロパティを使用する必要があります。valueプロパティは、transcluded スコープ ( @Langdon のようにディレクティブでvisiblea を使用する場合に影響します) で使用できますが、リンク関数が認識する分離スコープでは使用できません。template

var template = "<span ng-show='value'>{{value}}</span>";

プランカー。

于 2013-04-03T04:25:32.410 に答える
1

単純なディレクティブが必要な場合は、Angular にngTransclude, と$watch.

http://plnkr.co/edit/xYTNIUKYuHWhTrK80qKJ?p=preview

HTML:

  <!doctype html>
      <html ng-app="app">
      <head>
        <meta charset="utf-8">
        <title>trying to compile stuff</title>
        <script src="http://code.angularjs.org/1.1.1/angular.js"></script>
        <script src="app.js"></script>
      </head>
      <body>
          <div ng-controller="AppCtrl">
            <input type="checkbox" ng-model="test" id="test" /><label for="test">Visibility (currently {{test}})</label>
            <br />
            <br />
            <visible value='test'>visible tag</visible>
            <invisible value='test'>invisible tag</invisible>
          </div>
      </body>
      </html>

JavaScript:

angular
  .module('app', [])
  .controller('AppCtrl', function($scope) {
    $scope.test = false;
  })
  .directive('visible', function() {
    return {
      restrict: 'E',
      transclude: true,
      template: '<span ng-transclude></span>',
      replace: true,
      scope: {
        value: '='
      },
      link: function(scope, element, attrs) {
        console.log(attrs);

        scope.$watch('value', function (value) {
          element.css('display', value ? '' : 'none');
        });

        console.log(attrs.value);
      }
    };
  })
  .directive('invisible', function() {
    return {
      restrict: 'E', 
      transclude: true,
      template: '<span ng-transclude></span>',
      replace: true,
      scope: {
        value: '='
      },
      link: function(scope, element, attrs) {
        scope.$watch('value', function (value) {
          element.css('display', value ? 'none' : '');
        });
      }
    };
});
于 2013-04-02T19:03:42.567 に答える