Question

目前我正在编写一个应用程序，一旦某个变量发生变化，就必须重新编译一个指令/模板。由于我目前处于一般的开发阶段以及Angular的早期阶段，所以我还没有采取措施将其拉下来。

我的指示如下：

app.directive('slider',function($compile){
    return {
        restrict:'E',
        templateUrl: function(){
        if (tempMovies.length>0){
        $compile('Slider.html');
        return 'Slider.html';
        } else { return 'Placeholder.html';};
        }
    };
});

var tempMovies=[];

<slider></slider>

我使用的模板滑块是来自https://github.com/ksachdeva/angular-swiper的模板滑块，它使用tempMovies数组来显示某些项目。我遇到的问题是，一旦你正常更新滑块它会崩溃，所以我需要在我的tempMovies变量发生变化后重新编译模板。

我正在考虑使用$ watch on tempMovies然后触发Slider.html的编译，但我不确定如何。

感谢您提前帮助，学习角度一直是一个爆炸，直到现在。：）

Answer 1

您可能希望将tempMoves变量传递给指令：

app.directive('slider', function($compile) {
  restrict: 'E', 
  scope: { // pass the variable to your directive
    tempMoves: '='  
  }
  ...
}

// in the markup
<slider temp-moves="someVar"></slider>

然后在你的指令中你可以将$watch应用于tempMoves变量：

app.directive('slider', function($compile) {
  ... 
  link: function(scope, el, attrs) {
    scope.$watch('tempMoves', function(newValue, oldValue) {
      if (newValue != oldValue) {
        // do your $compile here or whatever else it takes to reset the slider
      }
    }
  }
}

基于外部变量重新编译指令

1 个答案: