Question

我正在研究一个有角度的应用程序，并且在一个看似简单的操作中遇到困难。基本上，我正在调用soundcloud api，抓住我的轨道，然后循环遍历这些轨道并抓住iframe嵌入对象，将其注入到track对象中然后将整个事件作为一个承诺解析并存储在一个$ scope.soundcloud对象。只是fyi，第二次SC调用是生成小部件html所必需的。我希望不是，但它是哈。

这一切都应该发生，我可以看到$ scope中的对象。我的模板选取初始数据（主要跟踪数据）和console.logging对象显示跟踪和嵌入数据，但模板永远不会看到嵌入数据。

所以，从根本上说，如何让我的模板看到嵌入数据，所以我可以将它与指令或ng-bind-html一起使用？以下是我的所有代码，如果您需要更多信息，请询问！非常感谢你们。

HTML

<div class="track" ng-repeat="track in soundcloud.tracks">
    <div class="front">
        <img src="app/img/loading.gif" />
    </div>
    <div class="back" ng-bind-html="{{track.oembed}}">
    </div>
</div>

Angular Service

        getTracks: function(){
            var deferred = $q.defer();
            var promise = deferred.promise;

            SC.get("/me/tracks", function(tracks){
                $.each(tracks, function(k, v){
                    if(v.sharing != 'private'){
                        SC.oEmbed(v.uri, function(oembed){

                            v.oembed = $sce.trustAsHtml(oembed.html);

                        });
                    } else {
                        v.oembed = null;
                    }
                });
                deferred.resolve(tracks);
            });


            return $q.all({tracks: promise});
        }

角度控制器

    .controller("GridCtrl", ['$scope', 'Soundcloud', function($scope, Soundcloud){

        // Init the Soundcloud SDK config
        Soundcloud.initialize();

        // Get the tracks from soundcloud
        Soundcloud.getTracks().then(function success(results){

            // Store tracks in the $scope
            $scope.soundcloud = results;
            console.log(results);

        });


    }]);

Answer 1

尝试创建这样的指令：

app.module('yourModule').directive('embedTrack', function() {
    return function(scope, elem, attr) {
        elem.replaceWith(scope.track.oembed);
    };
});

然后你就这样使用它：

<div class="track" ng-repeat="track in soundcloud.tracks">
    <div class="front">
        <img src="app/img/loading.gif" />
    </div>
    <div class="back">
        <div embed-track></div>
    </div>
</div>

如果您想将其作为属性传递给指令，则需要使用attr。$ observe来确保在插值后得到值。

<div embed-track={{ track.oembed }}></div>

该指令将是：

app.module('yourModule').directive('embedTrack', function() {
    return function(scope, elem, attr) {
        attr.$observe('embedTrack', function(value) {
            elem.replaceWith(value);
        });
    };
});

Angular API调用和承诺

1 个答案: