3

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

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

4

2 回答 2

3

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

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

这是一个显示两个嵌套指令的小提琴，

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

它记录指令的控制器和链接函数何时被调用。

您的 Plunker 存在一些问题：

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

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

由于$scope.visible在您的控制器中定义，我假设您打算使用该值，而不是test.

在invisible指令中，您需要value在链接函数中使用隔离范围属性。属性visible可用于嵌入范围（如果您template在 @Langdon 之类的指令中使用 a 则该属性有效），但隔离范围不可用，这是链接函数所看到的。

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 回答