Angular Animation Directive

Question

我正在嘗試編寫一個角度指令，它將動畫類似於http://codepen.io/rachsmith/pen/BNKJme的單詞列表。不過，我需要從json文件中加載文本，然後選擇一個隨機句來應用動畫。我有這部分工作，但無法訪問該指令的子元素。我假定這是因爲元素呈現之前的指令被調用，但使用範圍。$上（$ viewContentLoaded，功能...還沒有做出區別。

我有jQuery和下劃線可用。

這裏是我的代碼：

控制器

Data.sentences().then(function (response) { 
    var sentences = response.data; 
    $scope.sentence = _.sample(sentences); 
}); 

查看

<div class="rotator"> 
     <p>{{sentence.static}}</p> 
     <text-rotator> 
      <span class="word" ng-repeat="item in sentence.options">{{item}}</span> 
     </text-rotator> 
    </div> 

指令

app.directive('textRotator', function() { 
    return { 
     restrict: 'E', 
     link: function (scope, el, attrs) { 
      var words = el.children('.word'); 
      //cannot access array of items with class of word 
     } 
    }; 
}); 

Answer 1

你的假設是正確的，ng-repeat -ed 話尚未在執行指令的link功能時的DOM。異步獲取對象sentence。 在$viewContentLoaded上聆聽不會有幫助：這是ngRoute模塊在加載ngView的內容時觸發的事件。由於模型發生更改而導致消息循環後跟DOM更新之後，此事件不會被觸發。

其實，我認爲你正在創建自己的麻煩，因爲數據可能（應該）作爲參數傳遞給指令。子單詞元素將成爲指令的模板。我建議類似如下：

app.directive('textRotator', function() { 
    return { 
     restrict: 'E', 
     scope: { 
      options: '=' 
     }, 
     templateUrl: 'words.html', 
     link: // ... 
    } 
}); 

模板：

<text-rotator options="sentence.options"></text-rotator> 

這fiddle可能會幫助你。動畫部分已被簡單的不透明切換所取代。另外，這些詞在控制器中被模擬，你應該確定它們在路由器/狀態的定義中被路由器解決了，否則你將不得不在該指令中添加一個觀察器。