Question

我正在尝试为颜色选择器创建指令，并且没有更新ngModel值的值。有什么想法会出错吗？

这是我的代码：

            .directive('colpkr', [function () {
            return {
                restrict: 'A',
                scope: {
                    theme : "@theme",
                    ngModel : "="
                },
                link: function postLink(scope, iElement, iAttrs) {
                    theme = scope.theme || "light";

                    $(iElement).colpick({
                        layout:'hex',
                        submit:0,
                        colorScheme:theme,
                        onChange:function(hsb, hex, rgb, iElement, bySetColor) {
                            if(!bySetColor) scope.ngModel = '#' + hex;
                        }
                    });
                }
            };
        }]);

Answer 1

您需要在指令中手动触发Angular用于更新DOM的digest loop。 scope.$apply()是一个选项，但您可能会遇到Error: $digest already in progress。

因此，您最好使用evalAsync或applyAsync来触发安全的摘要周期，例如

scope.$evalAsync(function () {
  scope.ngModel = '#' + hex;
});

或者你可以合并这两个选项，就像一些Angular内置directives

if ($rootScope.$$phase) {
  scope.$evalAsync(callback);
} else {
  scope.$apply(callback);
}

Answer 2

您可能想要刷新范围。

使用

onChange:function(hsb, hex, rgb, iElement, bySetColor) {
    if(!bySetColor) scope.ngModel = '#' + hex;
    scope.$apply();
}

Answer 3

在$parse中注入directive服务。然后，您可$parse(attrs.ngModel) assign new value。

// inject $parse service in your directive
// Your link function
function link(scope, el, attrs) {
    el.on('change', function() {
        scope.$evalAsync(function() {
            var
                // parse the ngModel
                ngModel = $parse(attrs.ngModel),
                // get the new value
                newValue = el.val();
            // 
            ngModel.assign(scope, newValue);
        })
    })
}

祝你好运。

Answer 4

像魅力一样工作

SELECT TimeStamp, Tag_1, Tag_2
FROM   mytable
PIVOT  (
         MIN(VariableValue)
         FOR VariableName IN ([Tag_1], [Tag_2])
       ) AS PivotTable;

ngModel值未在指令中更新

4 个答案: