Question

我正在尝试将Slider构建为Angular指令。问题是，我需要控制器中Slider的值，所以我可以通过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;指令中的行应该有效。

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

1 个答案: