[英]How to use two angular.js directives?
I have defined two directives to connect dom elements on the screen. 我定义了两个指令来连接屏幕上的dom元素。 Both the directives works fine when used as a seperate directives. 当用作单独的指令时,这两个指令都可以正常工作。 I am trying to use one directive element in other directive but failed so far. 我正在尝试在其他指令中使用一个指令元素,但到目前为止仍失败。 Here is my code. 这是我的代码。
angular.module('mainModule').directive('createConnections', function($interval) {
return {
restrict: 'EA',
link: function(scope, element, attrs) {
element.connections({ from:'div.new-div' }).length;
/*element.connections(attrs).length;*/
var connections = angular.element('connection, inner');
$interval(function() { connections.connections('update') }, 10);
}
};
});
angular.module('mainModule').directive('updateConnections', function($interval) {
return {
restrict: 'EA',
link: function(scope, element, attrs) {
element.connections({ from:'div.actor{{index}}' }).length;
/*element.connections(attrs).length;*/
var connections = angular.element('connection, inner');
$interval(function() { connections.connections('update') }, 10);
}
};
});
templte code: 模板代码:
<div create-connections class="actor\{{$index}}" >
<span><button class=" aui-button dialog-show-button-impact" style="float: left" title="$i18n.getText('add.activity')"
id ="div.actor-\{{$index}}" ng-click="addActivity(actor)"><span class="aui-icon aui-icon-small aui-iconfont-add">Add</span>
</button>\{{actor}}</span>
<br/>
</div>
<div ng-repeat="activity in activities">
<div update-connections ng-if="actor == activity.id" style="margin-left: -45%;">
<div class="actor\{{actors.indexOf(actor)}}">
</div>
<div ng-repeat = "impact in activity.text" class="impact\{{$index}}" id="">
\{{impact}}</div>
</div>
</divupdate-connections>
</div>
I am not able to connect the second level of element to their respective parents element. 我无法将第二级元素连接到其各自的父元素。
replace createConnection
directive 替换createConnection
指令
angular.module('mainModule').directive('createConnections', function($interval) {
return {
restrict: 'EA',
transclude:true,
link: function(scope, element, attrs) {
element.connections({ from:'div.new-div' }).length;
/*element.connections(attrs).length;*/
var connections = angular.element('connection, inner');
$interval(function() { connections.connections('update') }, 10);
},
template:'<div ng-transclude></div>
};
});
added an attribute inside update connection name actor-id. 在更新连接名称actor-id中添加了一个属性。
updated the directive to get the attrs actor-id and connected it with the element. 更新了指令以获取attrs actor-id并将其与元素连接。
angular.module('mainModule').directive('updateConnections', function($interval) {
return {
restrict: 'EA',
link: function(scope, element, attrs) {
attrs.$observe('actorId', function(value) {
console.log('actorId=', value);
/* value =" '"+ "div." + value + "' ";
console.log("Connection value:" + value)*/
element.connections({ from: 'div.'+ value}).length;
element.connections(attrs).length;
var connections = angular.element('connection, inner');
$interval(function() { connections.connections('update') }, 10);
});
}
};
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.