Javascript 角度：指令和控制器之间的双向绑定不起作用

我试图建立一个滑块作为一个角度指令。问题是，我需要控制器中滑块的值，以便通过Json将其发送到服务。该值在指令中用于更新相应跨距的长度，并应在滑块移动时更新。该值应在指令和控制器中更新。现在它只是将变量更新为我在控制器中设置的值一次，然后保持原样

控制器：

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

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

指令：

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>

{{header}}
{{unit}

索引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>

---

如果它是指令的控制器，则应将其声明为控制器。而且也要用这个

看看这是否有效

另外，不要忘记导入slidercontroller

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

（或您的路径/名称）

或者，如果导入不可用，则将控制器直接写入与指令相同的文件中。因此，与上面相同，没有导入，但添加到控制器中：

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

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

---

然后控制器：滑块控制器；指令中的行应该起作用。

我想你需要观察这些变化，我想。谢谢你，但它似乎不起作用。我只得到变量（“m2”）的名称，而不是指令中传递的变量的值。嘿，谢谢你的回答，我现在在控制台中遇到一个错误，说“SliderController未定义”，我必须在指令中给出它吗？我的IDE不识别“as”，是否有其他方法正确导入它？编辑它，替换为from。我刚刚得知我们使用ecmascript 5，所以我不能使用导入