Angular:Directive和Controller之间的双向绑定不起作用
问题描述:
我正在尝试构建一个Slider作为Angular指令。问题是,我需要我的控制器中的滑块的值,所以我可以通过Json将它发送到一个服务。该值在指令中用于更新相应跨度的长度,并且每当移动滑块时应该更新值,该值应在指令和控制器中更新。现在它只是将变量更新为我在Controller中设置的值,然后它保持原样。Angular:Directive和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>
答
如果是指令的控制器,则应该声明为这样。并且也使用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;在指令行应该工作。
我想你需要$观察变化,imo。 – YOU
谢谢,但它似乎没有工作。我只是获取变量的名称(“m2”),而不是在我的指令中传递的变量的值。 – Brainworm