Hyperlink 角度指令编译顺序

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

抱歉给你带来这么多困惑，这是我的建议： 如果您想要一个简单的指令，最好让Angular通过

ngTransclude

和

$watch

完成大部分工作

HTML:

试图编译东西
可见性（当前为{test}}）




可见标签
隐形标签

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
.module（'应用程序'，[]）
.controller（'AppCtrl'，函数（$scope）{
$scope.test=false；
})
.directive（'visible'，function（）{
返回{
限制：'E'，
是的，
模板：“”，
替换：正确，
范围：{
值：'='
},
链接：函数（范围、元素、属性）{
控制台日志（attrs）；
范围：$watch（'value'，函数（value）{
css（'display'，value？'''none'）；
});
console.log（属性值）；
}
};
})
.directive（'不可见'，function（））{
返回{
限制：'E'，
是的，
模板：“”，
替换：正确，
范围：{
值：'='
},
链接：函数（范围、元素、属性）{
范围：$watch（'value'，函数（value）{
css（'display'，value'none'：''）；
});
}
};
});

我想我在指令中使用的指令首先被链接起来了

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

下面是一个显示两个嵌套指令的

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

由于

$scope.visible

是在您的控制器中定义的，因此我假设您打算使用该值，而不是

test

在

不可见

指令中，需要在链接函数中使用隔离作用域属性

值

。属性

visible

可用于转移范围（如果您在指令中使用@Langdon has之类的

模板

，则该属性有效），但不可用于隔离范围，这是链接函数所看到的

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

var-template=“{{value}}”；

---

.

嗨，兰登，谢谢你的解决方案！如果可能的话，我想避免使用watch，因为它似乎会影响性能，如果我可以在我的指令后将其链接，ng show应该在这里使用这个技巧…@Reno，与

范围关联的watch表达式。$watch（'value'，…

）将同样频繁地进行计算（即，每个角度摘要循环）作为一个与ng-show.Hi@Mark关联的watch表达式，您知道如何在我的指令后将ng-show链接起来吗？在$compile调用之后，我可以手动调用它的link函数吗？@Reno，我不知道你如何调用link函数。但是，请参阅我关于使您的Plunker工作的最新答案。

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

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