Angular：Directive和Controller之间的双向绑定不起作用

Question

我正在尝试构建一个Slider作为Angular指令。问题是，我需要我的控制器中的滑块的值，所以我可以通过Json将它发送到一个服务。该值在指令中用于更新相应跨度的长度，并且每当移动滑块时应该更新值，该值应在指令和控制器中更新。现在它只是将变量更新为我在Controller中设置的值，然后它保持原样。

控制器：

angular.module('MyApp') 
.controller('SliderController', ['$scope', '$http', function($scope, $http) { 
    $scope.m = 5; 
    $scope.m2 = 45; 
}]); 

指令：

angular.module('MyApp') 
.directive('slider', function ($rootScope) { 
    return { 
     replace: true, 
     restrict: 'E', 
     scope:{ 
      value: '=' 
     }, 
     link: function (scope, element, attrs) { 
      scope.header = attrs.header; 
      scope.unit = attrs.unit; 
      scope.min = attrs.min; 
      scope.max = attrs.max; 
      scope.step = attrs.step; 
      // scope.value = attrs.value; 



      // scope.model = attrs.ngModel; 

      var calculation = function() { 
       // console.log(scope.value); 
       return scope.value/scope.max * 100; 
      }; 

      scope.onChange = function() { 
       if(isNaN(scope.value) || parseInt(scope.value) > parseInt(scope.max)) { 
        scope.value = scope.max; 
       } 
       scope.width = calculation(); 
      };    
     }, 
     templateUrl: '../html/slider.html' 
    }; 
}); 

HTML模板

<div class="slider"> 
<h3>{{header}}</h3> 
<div class="progress"> 
    <div class="span-back"> 
     <span style="width:{{width}}%"></span> 
    </div> 
    <input class="input-range" type="range" min="{{min}}" max="{{max}}" step="{{step}}" data-ng-model="model" data-ng-change="onChange()" > 
    </div> 
    <div class="input-group"> 
     <input type="text" class="input-value" ng-model="model" data-ng-change="onChange()"> 
     <div class="input-base">{{unit}}</div> 
    </div> 

指数HTML

<div ng-controller="SliderController"> 
    <slider id="floating-div" header="My Slider" min="1" max="250" step="1" unit="testunit" data-ng-model="m2" value="m2"></slider> 
</div> 

Answer 1

如果是指令的控制器，则应该声明为这样。并且也使用bindToController。

angular.module('MyApp') 
    .directive('slider', function ($rootScope) { 
    return { 
    controller: SliderController, 
    controllerAs: 'vm', 
    bindToController: { 
     value: '=' 
    }, 
    replace: true, 
    restrict: 'E', 
    scope: true, 
    .... 

看看是否有效。

此外，不要忘记导入滑块控制器。

import SliderController from './slider.controller.js'; 

（或者其他路径/名字）

或者，如果导入不可用，直接写控制器到同一文件作为指导。所以与上面一样，没有导入，但在控制器中添加：

function SliderController($scope) { 
... etc 
} 

然后控制器：SliderController;在指令行应该工作。