无法从colorpicker绑定我选择的值

时间:2017-02-23 07:21:46

标签: angularjs typescript color-picker

我正在运行angularJS打字稿应用程序。我试图从colorpicker中获取颜色,因为我现在从颜色选择器获取值但我无法将该颜色作为背景绑定到我的div.My ts文件如下

class UserDefinedElementTypeController {

    public mycolor: string = "#f0f0f0";

    constructor(private $scope: ng.IScope) {

        this.watchForcolorChanges();
    }

    private watchForcolorChanges() {

        this.mycolor = "#0f0f0f";
        this.$scope.$watch(() => this.mycolor, function (newVal, oldval) {
            console.log(oldval, newVal);
            this.divStyle = {
                'background-color': newVal
            }
        });
    }
}

mainAngularModule.controller("userdefinedelementtype", UserDefinedElementTypeController);

HTML代码

 <input type="color" ng-model="UDETController.mycolor" />
 <div ng-style="UDETController.divStyle">Testing for background color </div>

我错过了什么吗?

1 个答案:

答案 0 :(得分:1)

我已经解决了这个问题。在watchForcolorChanges函数中,我将代码更改为

  private watchForcolorChanges() {

         this.$scope.$watch(() => this.mycolor,
             (newVal, oldval) =>{
                console.log('this.scope', this.$scope);
                this.divStyle = {
                    'background-color': newVal
                }
            });
    }