Javascript AngularJS-指令事件和DOM呈现

在下面的代码中，我试图使用一个模板（使用

{{value}}

替换），但我已经尝试了两天，想找到一种方法来访问呈现的代码，在其上设置一些属性

我不能使用样式选择器（工作正常），我需要使用div的id。在我的实际代码中，我使用

模板url:

，而不是内联代码，但它具有相同的结果

我应该听哪个事件？选择器将在什么时间点工作？我读过有关编译和链接的文章，认为答案就在那里

先谢谢你

我的AngularJS应用程序
var coreDirectives=angular.module（'tlsCore.directives'，[]）；
指令（'tlsWindow'，函数（）{
返回{
限制：'E'，
范围：{
windowId:“@windowId”，
windowWidth:“@windowWidth”，
labelWidth:“@windowLabelWidth”
},
替换：正确，
排除：错误，
模板：“”+
'' +
'' +
'' +
'' +
'' +
'',
链接：函数（范围、元素、属性）{
var ele=element.get（element.index（scope.windowId））；
//这可以工作并设置颜色（按类别）
$（'.tls窗口工具栏内容'）.css（“背景色”，“红色”）；
//这不起作用，因为元素的id尚未被替换和呈现？？
$（'fred winBackground'）.css（“背景色”，“绿色”）；
}
}
});   

选项1-更好 不要使用

模板

方法，而是将HTML移动到

链接

方法中。这使我们能够在编译之前手动

$interpolate

括号内的术语，然后使用ID选择器。请注意，如果不使用

=

而不是

@

隔离作用域绑定，这将是不可能的，因为

@

绑定将推迟到以后，并且在

链接

方法中未定义（请参阅更多相关信息）

---

这也需要将

$timeout

注入到指令中。

我知道您有一个关于链接时id不可用的答案，但我是否可以质疑使用id选择器的原因？一旦有了指令，就可以通过link函数中jqLite/jquery元素的

子类

方法访问模板中的顶级div。请参见此示例：

angular.module（'myApp'，[]）
.directive（'tlsWindow'，function（）{
返回{
限制：'E'，
范围：{
windowId:“@windowId”，
windowWidth:“@windowWidth”，
labelWidth:“@windowLabelWidth”
},
替换：正确，
排除：错误，
模板：“”+
'' +
'' +
'' +
'' +
'' +
'',
链接：函数（范围、元素、属性）{
//var ele=element.get（element.index（scope.windowId））；
//这可以工作并设置颜色（按类别）
//$（'.tls窗口工具栏内容'）.css（“背景色”，“红色”）；
//这不起作用，因为元素的id尚未被替换和呈现？？
//$（'fred winBackground'）.css（“背景色”，“绿色”）；
//使用jqlite或jquerychildren方法查找指令的第一个子项
//元素（来自linkFn）是tls窗口的元素，children（）用于访问模板中的容器
css（“背景色”、“绿色”）；
}
}
});

如果您想进行子dom操作，我建议您将link替换为prelink和postlink函数，并在postlink函数中进行dom操作。非常感谢。我认为这是一个时间问题，但不知道如何解决它。
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');
    }   
  }
}); 

$timeout(function(){
    $('#fred-winBackground').css("background-color", 'green');
},0);