带有html5颜色输入的AngularJS - 动态设置值

Question

我的控制器范围中定义了类型颜色的输入：

HTML：

<div ng-controller="MyCtrl">
    <input type="color" value="#f0f0f0" />
    <input type="color" value={{getColor()}} />
</div>

JS：

function MyCtrl($scope) {
    $scope.getColor = function () {
        return "#f0f0f0";
    };
}

问题是当Angular设置颜色时，颜色不会更新，但在检查时我看到了这一点：

请参阅：FIDDLE。

如何动态更新html5输入颜色？

Answer 1

尝试使用ng-model而不是值将其绑定到控制器。

function MyCtrl($scope) {  
    $scope.mycolor = "#f0f0f0";

    $scope.$watch('mycolor', function(newVal) {
        console.log('newVal ' + newVal);
    });
}

此处已更新并正常工作fiddle。

Answer 2

您甚至不需要 $ watch ，只需 $ timeout 。

function MyCtrl($scope, $timeout) { 
    $timeout(() => {
        $scope.mycolor = "#f0f0f0";
    }) 
}

工作小提琴http://jsfiddle.net/3ukL3suf/