Angularjs和jQuery手機滑塊指令

Question

我正在嘗試爲Angularjs創建jQuery手機指令。

這是我想出迄今：

代碼爲AngularJS指令：

mcb.directive('jSlider', function() { 
    return { 
     scope: { 
      id: '@', 
      label: '@', 
      value: '=', 
      min: '@', 
      max: '@', 
      step: '@', 
      disabled: '@', 
      mini: '@', 
      highlight: '@' 
     }, 
     restrict: 'A', 
     replace: false, 
     templateUrl: 'tpl/widget/jslider.htm', 
     link: function(s, e, a) { 
      e.trigger('create'); 
     } 
    }; 
}); 

模板指令：

<label for="{{id}}">{{label}} </label> 
<input class="slider" 
     type="range" 
     name="{{id}}" 
     id="{{id}}" 
     data-highlight="{{highlight}}" 
     min="{{min}}" 
     max="{{max}}" 
     data-ng-model="value" 
/> 

此代碼創建的指令，但它不是工作，我認爲問題是它不能正確編譯。我嘗試添加

compile: function (e, a) { 
    e.trigger('create'); 
}, 

裏面的指令代碼，那麼它有點奏效？ （它添加了屬性和所有內容），但滑塊顯示在0點，事件雖然我設置了不同的值。我認爲問題是我需要刷新滑塊，當設置值或以某種方式改變其他幻燈片事件（這對我正在構建的應用程序非常重要）。我試圖刷新滑塊與此代碼：

compile: function (e, a) { 
    e.trigger('create'); 
    e.find('.slider'); 
}, 

，但它不工作，和裏面的「鏈接」函數的代碼停止工作，當我添加「編譯」功能。

我是angularjs的新手，所以我不太清楚「編譯」和「鏈接」函數是如何工作的，如果有人可以給出一些簡單解釋的參考，我想我會需要它，因爲我將需要附加，啓動，滑動，停止事件的指令。 無論如何，有什麼建議，該如何解決這個問題？

Answer 1

多次嘗試我想出的解決方案，工作後：

mcb.directive('jSlider', function() { 
    return { 
     scope: { 
      id: '@', 
      label: '@', 
      value: '=', 
      min: '@', 
      max: '@', 
      step: '@', 
      disabled: '@', 
      mini: '@', 
      highlight: '@', 
      start: '&', 
      stop: '&' 
     }, 
     restrict: 'A', 
     replace: false, 
     templateUrl: 'tpl/widget/jslider.htm', 
     compile: function (e) { 
      e.trigger('create'); 
      return { 
       post: function (s, e, a) { 
        e.find('a').click(function (e) { 
         return e.preventDefault(); 
        }); 

        e.find('div.ui-slider').find('input[type="range"]').on('slidestop', function() { 
         return s.stop(); 
        }); 

        e.find('div.ui-slider').find('input[type="range"]').on('slidestart', function() { 
         return s.start(); 
        }); 
        e.find('div.ui-slider').find('input[type="number"]').change(function() { 
         return s.stop(); 
        }); 

        s.$watch('value', function() { 
         return e.find('#' + a.id).slider('refresh'); 
        }); 
       } 
      }; 
     } 
    }; 
});