jquery - 在链接函数中将 css 设置为 $templateCache.get() html

Question

该指令每天在时间表中执行。渲染事件后，我希望能够根据某些内容修改 css 属性。

问题是当 $templateCache.get("event.html") 中的事件被渲染时，我无法访问它的元素，因为 id 仍然是 id="drag_{{u.id}}_{ {e.id}}”而不是 id="drag_1_1"。

我尝试了scope.$apply()，但似乎不是答案。这和我没有编译模板有什么关系吗？

app.directive("renderEvent", function($templateCache) {

   return {
       template: $templateCache.get("event.html"),
       restrict: 'EA',
       scope : {
               u : '=', //User
               e : '=' //Event
       },
       link: function(scope, element, attrs) {
              //TRYING DO THIS $(#drag_1_1).css({"margin-top": "35px"});
              //console.log($(#drag_1_1)) is showing context undefined
       }
   };
}); 

事件.html:

<div ng-controller="scheduleController" id="drag_{{u.id}}_{{e.id}}" class="event">
<div class="event2" id="myHandle_{{u.id}}_{{e.id}}">
    <div class="eventDetailsWrapper"
         title="{{e.title + '\n'}}From {{e.start | date:'yyyy-MM-dd'}} to {{e.end | date:'yyyy-MM-dd'}}{{'\n'}}Total work days: {{e.end - e.start}}{{'\n'}}Allocation: {{e.occupied * 100}}%{{'\n'}}Client: ICA">
        <b>{{e.title}}</b> - Google 100% for 3 work days
    </div>
</div>

部分表格代码:

<td class="dropArea" id="drop_{{d| date:'yyyy-MM-dd'}}_{{u.id}}"
       ng-repeat="d in dates" ng-click="setTempData(u, d);">

  <!-- LOOP EVENTS IN USER -->
  <div ng-repeat="e in u.events" ng-if="d === e.start">
    <render-event u="u" e="e">   </render-event>
  </div>

</td>

Answer 1

正如您所观察到的，模板是异步检索的。当然，您可以内联模板代码。但它更有可能根据你的模型属性来改变你的CSS。为此，您可以使用 ng-class或ng-style 。假设您的事件有一个属性type，并且值为“private”和“business”，您可以在模板中写入:

<div class="eventDetailsWrapper" title="..." 
     ng-class="{'private': e.type==='private', 'business': e.type==='business'}">
    <b>{{e.title}}</b>
</div>

例如，如果事件 type 是私有(private)的，则这会将类 private 添加到您的元素。

也可以直接更改CSS(但我会避免这样做):

<div class="eventDetailsWrapper" title="..." 
     ng-style="{'background-color': e.type==='private'? 'blue', 'red'}">
    <b>{{e.title}}</b>
</div>