Question

我正在尝试编写一个角度指令，该指令将为类似于http://codepen.io/rachsmith/pen/BNKJme的单词列表设置动画。但是，我需要从json文件加载文本，然后选择一个随机句子来应用动画。我有这个部分工作，但我无法访问指令的子元素。我假设这是因为在呈现元素之前调用了指令，但是使用了作用域。$ on（$ viewContentLoaded，function ...没有区别。

我有jQuery和Underscore可用。

这是我的代码：

控制器

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可能会对您有所帮助。动画部分已被不透明度的简单切换所取代。此外，在控制器中模拟了这些单词，您应该确保路由器在路由/状态的定义中解析，否则您将不得不在指令中添加一个观察者。 / p>

角动画指令

1 个答案: