从指令外的ng-click更新指令模板

时间:2016-05-26 06:10:31

标签: javascript angularjs angularjs-directive

我已经开发了以下指令,它适用于owl carousal。

appController.directive("owlCarousel", function() {
  return {
    restrict: 'E',
    transclude: true,
    scope:{
            item: '=data',
            rate:'&rate'
        },
    link: function (scope) {
      // console.log(scope);
      scope.$watchCollection('item', function(newValue, oldValue) {
            console.log(newValue);
            console.log(oldValue);
            if (newValue)
                console.log("I see a data change!");
        });
      scope.initCarousel = function(element) {
        // provide any default options you want
        var defaultOptions = {
        };
        var customOptions = scope.$eval($(element).attr('data-options'));
        // combine the two options objects
        for(var key in customOptions) {
          defaultOptions[key] = customOptions[key];
        }
        // init carousel
        $(element).owlCarousel(defaultOptions);
        $(element).parent().parent().find('.next').click(function(){
          $(element).trigger('owl.next'); 
        });
        $(element).parent().parent().find('.prev').click(function(){
          $(element).trigger('owl.prev'); 
        });
      };
    },
    template:'<div class="owl-carousel" data-options="{items : 5, pagination: false, rewindNav : false,responsiveClass:true}"><div owl-carousel-item="" ng-repeat="(i,c) in item" class="item"><div class="col-md-12"><div class="game-box "><a href="gamepage.html"><img src="<?php echo base_url();?>{{c.url}}" alt="Act 01"></a><div class="game-box-info"><h5>{{ c.long_name }}</h5><p>{{ c.publisher }}</p><span class="rate pull-left" ><i class="fa fa-star" ng-repeat="i in rate({n:c.rating})"></i></span><span class="Free pull-right"><a href="#">FREE</a></span></div><div class="clearfix"></div></div></div></div></div>'
  };
}).directive('owlCarouselItem', [function() {
  return {
    restrict: 'A',
    transclude: false,
    link: function(scope, element) {
      // wait for the last item in the ng-repeat then call init
      if(scope.$last) {
        scope.initCarousel(element.parent());
      }
    }
  };
}]);  

和html是

<data-owl-carousel data='slide1' rate="ratings(n)"></data-owl-carousel>

现在我想从以下ng-click

更新指令html
<a ng-repeat="catChild in cat.childrens" ng-click="slide1 = getContent(catChild.category_id,0,6,1,0)" href="#"> {{ catChild.category_name }}</a>

我已经应用了范围。$ watchCollection但它只在链接函数中第一次调用

0 个答案:

没有答案