Question

此指令在日程表中每天执行。在我渲染事件之后，我想能够根据某些东西修改css属性。

问题是当渲染来自$ templateCache.get（“event.html”）的事件时，我无法访问其元素，因为id仍为id =“drag _ {{u.id}} _ { {e.id}}“而不是id =”drag_1_1“。

我尝试了范围。$ 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
       }
   };
});

event.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>

对于示例，如果事件private是私有的，则会将type类添加到您的元素中。

也可以直接更改css（但我会避免这种情况）：

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

在链接函数中将css设置为$ templateCache.get（）html

1 个答案: