用于包装jquery插件的Angular指令

时间:2015-07-15 04:45:35

标签: javascript jquery angularjs

我试图将cubeportfolio jquery插件集成到一个角度应用程序中。但我现在卡住了。

我的指示:

var app = angular.module('App');
    app.directive('iso', function($timeout){
        return {
            restrict: 'EA',
            transclude: true,
            scope: { data: '=',},
            templateUrl: 's.html',
            link : function(scope, element, attrs) {
               var options = {Options there};
               var e = angular.element(document.querySelector('#grid-container'));
               scope.$watch('data', function() {
                    $timeout(function() {
                        e.cubeportfolio(options);
                    });
                },true);

            }

        };
    });
app.controller('AppCtrl', function($scope, Service){
    Service
        .find()
        .$promise
        .then(function(res){
            $scope.services = res;
        })
});

的index.html:

<div id="grid-container" class="cbp" iso data="services"></div>

s.html

<div class="cbp-item {{ s.cataloge }}" ng-repeat="s in data"></div>

结果:

  

e.cubeportfolio不是一个功能

我想了解处理它们的最佳方法。谢谢!

1 个答案:

答案 0 :(得分:0)

确保已经加载了cubeportfolio 和你的链接功能

link: function(scope, element, attrs) {
 element.cubeportfolio(scope.$eval(attrs.data));
})