在下面的代码中，我试图使用一个模板（{{value}}替换），但我一直在尝试两天找到一种方法来获取呈现的代码设置一些属性。AngularJs - 指令事件和dom渲染

我不能使用样式选择器（工作正常），我需要使用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>

来源

2013-06-18 user2496423

如果你想做儿童dom操作，我会建议你替换链接预链接和后链接功能，并做后链接功能的dom操作 –

选项1 - 更好的

而不是使用template方法，将HTML到link方法。这使我们可以在编译前手动输入括号内的术语，然后使用ID选择器。请注意，如果没有使用=而不是@隔离范围绑定，这将不可能，因为@绑定被推迟到更晚，并且在link方法中未定义（请参阅here的更多信息）。

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'); 
    } 
    } 
});

Here is a fiddle

选项2

不是最强大的解决方案，但这也将工作。这里的操作被推迟到渲染之后通过使用$timeout。这也会造成轻微的延迟。

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

这需要$timeout也被注入到指令中。

来源

2013-06-18 11:23:51 sh0ber

非常感谢。我认为这是一个时间问题，但看不到如何解决它。 – user2496423

很高兴帮助:) – sh0ber

AngularJs - 指令事件和dom渲染

回答

选项1 - 更好的

选项2

相关问题