Я пытался написать простую директиву для создания (потенциально) более сложного элемента dom. Я довольно смущен тем, что здесь происходит, но я думаю, что директива, которую я использую внутри моей директивы, связана с первым? В любом случае элемент, который я генерирую, не отображается там, где он должен.угловой директив компилировать заказ
Извините за все, что путаницы, вот plunkr: http://plnkr.co/edit/vWxTmA1tQ2rz6Z9dJyU9?p=preview
Я думаю, что директива я использую в моей директивы получить связаны в первую очередь?
Да. Функция ссылки дочерней директивы будет выполняться до функции ссылки родителя.
Вот fiddle, который показывает две вложенные директивы,
<div d1>
<div d2></div>
</div>
и регистрирует при вызове контроллера и связать функции в этих директивах.
Есть несколько проблем, с вашей Plunker:
Поскольку вы используете @ для ваших изолят областей, вам нужно использовать {{}} s в ваших значений атрибутов:
<visible value='{{visible}}'>plop</visible>
<invisible value='{{visible}}'>plop</invisible>
Поскольку $scope.visible определен в вашем контроллере, я предполагаю, что вы хотели использовать это значение, а не test.
В директиве invisible вам необходимо использовать свойство области изоляции value в вашей функции связи. Свойство visible доступно для транскодируемой области (что влияет, если вы используете template в своей директиве, например @Langdon), но не в области выделения, что и видит функция ссылки.
var template = "<span ng-show='value'>{{value}}</span>";
Если вы хотите простой директивы, вы лучше позволить Угловым сделать большую часть работы через 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' : '');
});
}
};
});
Hi Langdon, спасибо за ваше решение! Я хотел избежать использования часов, если это возможно, поскольку это, похоже, влияет на производительность, ng-show должно делать трюк здесь, если я могу заставить его быть связанным * после * моей директивы ... – Renaud
@Reno, выражение часов, связанное с ' scope $ watch ('value', ... ') будет оцениваться так же часто (т. е. каждый цикл углового дайджеста) как выражение часов, которое связано с ng-show. –
Привет @Mark вы знаете, как я могу заставить ng-show быть связанным после моей директивы? Могу ли я вызвать его функцию связи вручную после вызова компиляции $? – Renaud
@Reno, я не знаю, как вы могли бы назвать функцию ссылки. Однако, см. Мой обновленный ответ, касающийся того, чтобы ваш Plunker работал. –