在下面的代碼中，我試圖使用一個模板（{{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

相關問題