Javascript angularjs控制器和指令数据绑定不工作
我有一个控制器和一个指令,希望在对象上使用双向数据绑定。该指令的目的只是更新值。目前,我没有让数据绑定正常工作,因为在更新绑定变量时的onchange事件中,div的背景颜色没有改变。此外,当我打开颜色控制盘时,控制盘的值不是Javascript angularjs控制器和指令数据绑定不工作,javascript,jquery,angularjs,angularjs-directive,Javascript,Jquery,Angularjs,Angularjs Directive,我有一个控制器和一个指令,希望在对象上使用双向数据绑定。该指令的目的只是更新值。目前,我没有让数据绑定正常工作,因为在更新绑定变量时的onchange事件中,div的背景颜色没有改变。此外,当我打开颜色控制盘时,控制盘的值不是scope.activeColor 我的HTML看起来像这样,它有指令和带有ng样式的div <li ng-repeat="(key, color) in colors" ng-style="{'background': 'rgb(' + color.r + ','
scope.activeColor
我的HTML看起来像这样,它有指令和带有ng样式的div
<li ng-repeat="(key, color) in colors" ng-style="{'background': 'rgb(' + color.r + ',' + color.g + ','+ color.b}" ng-click="editColour(color)">
<div ng-style="{'background': 'rgb(' + activeColor.r + ',' + activeColor.g + ','+ activeColor.b}"></div>
<input type="text" colorwheel value="currentColor">
我的指示如下:
.directive('colorwheel', function() {
return {
restrict: 'A',
link: function(scope, element) {
var currentColor = 'rgb(' + scope.activeColor.r + ',' + scope.activeColor.g + ',' + scope.activeColor.b + ')';
scope.currentValue = {color: currentColor};
element.minicolors({
control: 'wheel',
format: 'rgb',
inline: true,
opacity: false,
change: function(value, opacity) {
var rgb = element.minicolors('rgbObject');
scope.activeColor.r = rgb.r;
scope.activeColor.g = rgb.g;
scope.activeColor.b = rgb.b;
console.log(rgb);
}
});
}
};
});
您需要观察指令中的activecolor变量,以便指令了解变量已更改 例如:
$scope.$watch('activeColor', function (newValue, oldValue) {
if (newValue) {
//do something with new value
}
});
该指令未定义任何数据绑定。请看,您可能需要查看指令中的scope.activeColor,如果您在此处发布小提琴或代码片段,可以更好地帮助您
$scope.$watch('activeColor', function (newValue, oldValue) {
if (newValue) {
//do something with new value
}
});