在下面的代码中,我试图使用模板(具有
我无法使用样式选择器(它可以正常工作),我需要使用div的id。在我的实际代码中,我使用了一个
我应该监听哪个事件?在什么时间点上选择器会起作用?我已经阅读了有关编译和链接的内容,并认为答案就在那里?
提前感谢...
{{ value }}
替换),但我已经尝试了两天,找到一种获取呈现代码并设置其某些属性的方法。我无法使用样式选择器(它可以正常工作),我需要使用div的id。在我的实际代码中,我使用了一个
templateUrl:
,而不是内联代码,但结果相同。我应该监听哪个事件?在什么时间点上选择器会起作用?我已经阅读了有关编译和链接的内容,并认为答案就在那里?
提前感谢...
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>My AngularJS App</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body style="height:100%; width: 100%;">
<tls-window window-id="fred" window-width="600" window-label-width="150"></tls-window>
<script src="lib/angular/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/core/services.js"></script>
<script src="js/core/controllers.js"></script>
<script src="js/core/filters.js"></script>
<script src="js/core/directives.js"></script>
<script src="js/core/tlscore-directives.js"></script>
<script type="text/javascript">
var coreDirectives = angular.module('tlsCore.directives', []);
coreDirectives.directive('tlsWindow', function() {
return {
restrict: 'E',
scope: {
windowId: '@windowId',
windowWidth: '@windowWidth',
labelWidth: '@windowLabelWidth'
},
replace: true,
transclude: false,
template: '<div id="{{windowId}}" class="tls-window" ng-cloak tls-draggable >' +
'<div id="{{windowId}}-winBackground" class="tls-window-background" style="width: 300px; height: 200px" >' +
'<div id="{{windowId}}-winToolbarBackground" class="tls-window-toolbar-background">' +
'<div id="{{windowId}}-winToolbarContent" class="tls-window-toolbar-content" style="width: 300px; height: 100px">' +
'</div>' +
'</div>' +
'</div>',
link: function(scope, element, attrs) {
var ele = element.get(element.index(scope.windowId));
// this works and sets the colour (by class)
$('.tls-window-toolbar-content').css("background-color", 'red');
// this does not work as the id of the element is not yet substituted and rendered ??
$('#fred-winBackground').css("background-color", 'green');
}
}
});
</script>
</body>
</html>