Question

我试图编写一个简单的指令来生成（可能）更复杂的dom元素。我对这里发生的事情感到很困惑，但我认为我在我的指令中使用的指令首先被链接？无论如何，我生成的元素在它应该的位置是不可见的。

对不起，所有这些混乱，这里是plunkr： http://plnkr.co/edit/vWxTmA1tQ2rz6Z9dJyU9?p=preview

Answer 1

我认为我在指令中使用的指令首先被链接？

是。子指令的链接函数将在父级的链接函数之前执行。

这是一个显示两个嵌套指令的fiddle

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

并在调用指令的控制器和链接函数时记录。

您的Plunker存在一些问题：

由于您使用@作为隔离范围，因此您需要在属性值中使用{{}}：

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

由于您的控制器中定义了$scope.visible，我认为您打算使用该值，而不是test。

在invisible指令中，您需要在链接函数中使用isolate scope属性value。属性visible可用于转换范围（如果您在指令中使用template（如@Langdon），则会生效）但不是隔离范围，这是链接函数所看到的。

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

Plunker

Answer 2

如果你想要一个简单的指令，你最好让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' : '');
        });
      }
    };
});

angular指令编译顺序

2 个答案: