在下面的代码中,我正在尝试使用模板(带有{{ 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>
选项 1 - 更好
不要使用 template
方法,而是将 HTML 移动到 link
方法中。这使我们能够在编译之前手动$interpolate
括号中的术语,然后使用 ID 选择器。请注意,如果不使用 =
而不是隔离作用域绑定@
这是不可能的,因为@
绑定会推迟到以后,并且在 link
方法中未定义(在此处查看详细信息(。
app.directive('tlsWindow', function($interpolate,$compile) {
return {
restrict: 'E',
scope: {
windowId: '=',
windowWidth: '=',
labelWidth: '='
},
link: function (scope, element, attrs) {
var 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>';
var interpolated = $interpolate(template)(scope);
var html = $(interpolated);
element.replaceWith($compile(html)(scope));
$('.tls-window-toolbar-content').css('background-color', 'red');
$('#fred-winBackground').css('background-color', 'green');
}
}
});
这是一个小提琴
<小时 />选项 2
不是最强大的解决方案,但这也可以工作。在这里,通过使用 $timeout
将操作推迟到渲染之后。这也会导致轻微的延迟。
$timeout(function(){
$('#fred-winBackground').css("background-color", 'green');
},0);
这也需要将$timeout
注入到指令中。
我看到您对为什么 id 在链接时不可用有一个答案,但我可能会质疑使用 id 选择器的原因吗?有了指令后,您可以通过链接函数中 jqLite/jquery 元素的children
方法访问模板中的顶级div。请参阅此示例:
angular.module('myApp', [])
.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');
// Use the jqlite or jquery children method to locate the first child of your directive
// element (from linkFn) is the element of tls-window and children() gets you access to the <div> container in your template
element.children().css("background-color", "green");
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp">
<tls-window window-id="fred" window-width="600" window-label-width="150"></tls-window>
</div>
AngularJS不鼓励通过ID选择器引用元素。通过传递给链接函数的元素的上下文来利用jqLite/jquery方法。