Javascript 带AngularJS的jQuery滑块

我是AngularJS的初学者，这里有一些HTML和JS代码：

谁能帮我解释一下为什么我的

链接中的
ngModel.$modelValue
函数返回
NaN

我找到了一些解决方案，并从
范围中获取模型值。$eval（attrs.ngModel）
，但在我看来，这还远远不够完美

请给我解释一下如何正确操作。
我怀疑这与摘要周期有关，就像包装console.log（ngModel.$modelValue）；在$timeout内（将其注入指令后），它的计算结果很好。但这是黑客行为，不推荐使用

与使用require相比，我认为通过双向绑定将ngModel传递到指令并附加到指令范围会更好

小提琴：

HTML:

我认为使用双向绑定将ngModel传递到指令中会更好，而不是使用require。你能解释得更详细些吗？对不起，我最初把你的javascript和小提琴附在了答案后面。我已经修改了。@ktaras，我对在指令中使用'require'的理解是能够与另一个指令的控制器进行通信。有一些很好的例子。另一件事，从你的问题看，你似乎在试图完成双向绑定自己，当angular可以处理这个为你。哦，我明白了，谢谢你！它工作完美，在我看来是一个更好的解决方案。没有问题。如果您是从Angular开始的，那么请检查Angular文档，这也是值得一读的
<div ng-app="myApp">
    <div ng-controller="myController">
        Rating: {{rating}}
        <div slider ng-model="rating"></div>
    </div> 
</div>

var myApp = angular.module("myApp", []);

myApp.controller('myController', function($scope){
    $scope.rating = 50
});

myApp.directive('slider', function() {
  return {
    restrict: 'A',
      scope: {
          ngModel: '='
      },
    link: function(scope, elem, attrs) {

      console.log(scope.ngModel);

      return $(elem).slider({
        range: "min",
        animate: true,
        value: scope.ngModel,
        slide: function(event, ui) {
          return scope.$apply(function(){
            scope.ngModel = ui.value;
          });
        }
      });
    }
  };
});