角度指令编译顺序

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

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

2013-04-02 Renaud

我觉得我在我的指令中使用的指令会首先联系？

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

这里是一个fiddle示出两个嵌套指令，

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

而且记录时，指示控制器和链接功能被调用。

没有与您Plunker的几个问题：

由于您使用@为您隔离范围，则需要使用{{}}在你的属性值：

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

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

在invisible指令中，您需要在链接函数中使用隔离范围属性value。属性visible可用于transcluded作用域（如果您在@Langdon指令中使用template作为指令，则影响范围），但不包括隔离作用域，这是链接函数的作用。

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

Plunker。

来源

2013-04-03 04:25:32

嗨@Mark你知道我能如何让ng-show在我的指令后被链接吗？在$ compile调用之后我可以手动调用它的链接函数吗？ – Renaud

@Reno，我不知道你可以怎样调用链接函数。不过，请参阅我的更新回答，以便让您的Plunker工作。 –

如果你想要一个简单的指令，你最好让角做的大部分工作通过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-02 19:03:42 Langdon

嗨兰登，感谢您的解决方案！如果可能的话，我想避免使用手表，因为它似乎会影响表演，如果我能在*我的指令之后将它连接起来，ng-show应该在这里做诡计...... – Renaud

@Reno，与'作为与ng-show关联的监视表达式，$ watch（'value'，...'）将被同样经常地（即，每个Angular digest周期）评估。 –

角度指令编译顺序

回答

相关问题