javascript - 作用域之间的双向数据绑定(bind)

转载作者：行者123 更新时间：2023-12-03 09:32:22

25

4

我创建了 3 个指令，一个 XY 区域 slider 、一个 X slider 和一个使用其他两个指令的 ColorPicker 指令。

除了在共享同一模型时能够让它们一起移动之外，我已经完成了所有工作。

View Plunker

在上面的 Plunker 中，您可以找到完整的源代码并了解我关于他们没有正确共享模型的意思。我希望这样当一个 slider 移动时，它们都会移动。

这些值在第三个(颜色选择器)指令中正确更新，所以我相信这就是问题所在。

颜色选择器指令:

angular.module('plunker').directive('isColorPicker', IsColorPicker);

IsColorPicker.$inject = [];

function IsColorPicker() {
  'use strict';

  return {
    restrict: 'EA',
    scope: {
      color: '='
    },
    template: [
      '<div class="is-color-picker">',
      '    <div style="background: {{ color.hueHex }}" class="hsv-container">',
      '        <is-xy-field values="xyValues"></is-xy-field>',
      '    </div>',
      '    <div class="hue-container">',
      '        <is-slider max="360" value="hueValue"></is-slider>',
      '    </div>',
      '</div>'
    ].join(''),
    replace: true,
    controller: ['$scope', function($scope) {
      $scope.hueValue = 0;
      $scope.xyValues = {
        x: 100,
        y: 100
      };

      updateColors();

      $scope.$watch('xyValues', function(value) {
        updateColors();
      }, true);

      $scope.$watch('hueValue', function(value) {
        updateColors();
      }, true);

      function updateColors() {
        var hsl = {
          h: parseInt($scope.hueValue),
          s: $scope.xyValues.x / 100,
          v: $scope.xyValues.y / 100
        };

        $scope.color = hsv2rgb(hsl.h, hsl.s, hsl.v);
        $scope.color.hsl = hsl;
        $scope.color.hueHex = hsv2rgb(hsl.h, 1, 1).hex;
      }

      function hsv2rgb(h, s, v) {
        var R, G, B, X, C;
        h = (h % 360) / 60;
        C = v * s;
        X = C * (1 - Math.abs(h % 2 - 1));
        R = G = B = v - C;

        h = ~~h;
        R += [C, X, 0, 0, X, C][h];
        G += [X, C, C, X, 0, 0][h];
        B += [0, 0, X, C, C, X][h];

        var r = R * 255,
          g = G * 255,
          b = B * 255;
        return {
          r: r,
          g: g,
          b: b,
          hex: "#" + (16777216 | b | (g << 8) | (r << 16)).toString(16).slice(1)
        };
      }
    }],
  }
}

最佳答案

所以问题似乎是，对于每个单独的颜色选择器，您都创建了自己独立的 HueValue 范围。您需要从主 Controller 提供一个共享的hueValue变量。我对您的代码做了一些修改，并将在下面显示。

HTML

<div class="pickers">
    <is-color-picker color="colorObj" hue-value="colorObj.hsl.h"></is-color-picker>
    <is-color-picker color="colorObj" hue-value="colorObj.hsl.h" class="is-color-picker2"></is-color-picker>
    <is-color-picker color="colorObj" hue-value="colorObj.hsl.h" class="is-color-picker3"></is-color-picker>
</div>

我添加了色调值属性，该属性将在所有颜色选择器之间同步。

isColorPicker.js

scope: {
  color: '=',
  hueValue: "=" //This line is new, this is the hue-value from the html
}

这是一个 fork 的plunker

更新

plunker

由于目标是消除 HTML 代码中的额外色调值，因此现在看起来像这样:

HTML

<body ng-controller="MainCtrl">
  <div class="pickers">
    <is-color-picker color="colorObj"></is-color-picker>
    <is-color-picker color="colorObj" class="is-color-picker2"></is-color-picker>
    <is-color-picker color="colorObj" class="is-color-picker3"></is-color-picker>
  </div>

   Hue Value: {{ colorObj.hueValue }} <br>
   Hue Color:
   <div style="background: {{ colorObj.hueHex }}" class="hue-preview"></div><br>
   Selected Color: <div style="background: {{ colorObj.hex }}" class="hue-preview"></div>
</body>

所有 colorObj 现在都包含一个名为 HueValue 的额外变量，它反射(reflect)了我们在三个颜色选择器之一中设置的色调。

isColorPicker.js

template: [
  '<div class="is-color-picker">',
  '    <div style="background: {{ color.hueHex }}" class="hsv-container">',
  '        <is-xy-field values="xyValues"></is-xy-field>',
  '    </div>',
  '    <div class="hue-container">',
  '        <is-slider max="360" value="color.hueValue"></is-slider>',
  '    </div>',
  '</div>'
].join(''),

这里的重要变化是它现在显示的是 color.hueValue 而不是 hueValue

此外， Controller 初始化更改为:

$scope.xyValues = {
    x: 100,
    y: 100
};
$scope.color = hsv2rgb(0, 1, 1); //This creates the color object so we can assign the needed color.hueValue variable
$scope.color.hueValue = 0;

$scope.$watch 已更改为:

$scope.$watch('color.hueValue', function(value) {
    updateColors();
}, true);

最后函数updateColors改成这样

function updateColors() {
  var  hsl = {
      h:  parseInt($scope.color.hueValue),
      s:  $scope.xyValues.x / 100,
      v:  $scope.xyValues.y / 100
  };
  
  $scope.color = hsv2rgb(hsl.h, hsl.s, hsl.v);
  $scope.color.hsl = hsl;
  $scope.color.hueValue = hsl.h;
  $scope.color.hueHex = hsv2rgb(hsl.h, 1, 1).hex;
}

关于javascript - 作用域之间的双向数据绑定(bind)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31461715/

25

4

0

文章推荐： javascript - 文本区域中的新行在 IE 9 中不起作用

文章推荐： javascript - JSON 对象。无法检索模板中的数据。 meteor

文章推荐： Javascript 递归 promise 陷入无限循环

文章推荐： javascript - 确保 meteor 聊天的安全

Hibernate - 双向@OneToOne
我有 2 个类:User 和 UserPicture，它们具有 1:1 关系。 public class User { @Id @GeneratedValue(strategy=G
ssh - ssh转发-双向
使用ssh转发时，我无法针对远程服务器使用cvs和ftp进行提交。是否可以让服务器对我的机器发起请求-我希望服务器上的Web应用程序调用我的机器上的REST方法。谢谢。尼古拉·G。最佳答案是的
python - 双向 A* 未找到最短路径
我正在 Python 2.7.12 中实现双向 A* 算法，并在 Russell 和 Norvig 第 3 章的罗马尼亚 map 上进行测试。边具有权重，目的是找到两个节点之间的最短路径。这是测试图
java - 双向 map
您能否建议一种映射或类似的数据结构，让我们可以轻松地相互获取值和键。也就是说，每个都可以用来寻找另一个。最佳答案 Java 在其标准库中没有双向映射。例如使用 BiMap 来自Google Gua
Mysql 双向复制(双向)
我想同步两个数据库运行时服务器 A:安装了公共(public) IP 和 mysql 的 Amazon ec2。服务器B:这是局域网中带有mysql的私有(private)机器。 (IP是私有(pr
java - 双向@OneToOne映射使用hibernate创建记录
保存双向@OneToOne 映射时，hibernate 是否应该在两个表上都记录？我有一个包含 applicant_id 列的表 interview，它引用了包含字段 interview_id 的
android - 双向 SwipeRefreshLayout？
我喜欢新的 SwipeRefreshLayout!它看起来很棒，而且非常容易使用。但我想在两个方向上使用它。我有一个消息屏幕，我想通过从上到下滑动来加载旧消息，我想通过从下到上滑动来加载新消息。这个
Android NFC 双向
使用 ICS 4.0.1(愿意升级到 4.0.3)(不会 root 和重写 android 操作系统) 在接收到 android beam 后，是否可以将 NDEF 消息发送回 android 手机
Git 双向 merge
我想知道处理这种 git 场景的最佳方法: Git 仓库:CoreProduct Git repo b: SpecificCustomerProduct 是从 a fork 出来的到目前为止，我们一
python - 双向/反向映射
这个问题在这里已经有了答案: How to implement an efficient bidirectional hash table? (8 个回答) 关闭2年前。我在 python 中做这个
java - 双向 map
您能否推荐一种 map 或类似的数据结构，我们可以在其中轻松地从彼此获取值和键。也就是说，每个都可以用来寻找另一个。最佳答案 Java 在其标准库中没有双向映射。例如使用 BiMap 来自 Goo
java - Java中的双面(双向)列表
Java中是否有类似双面列表的东西？也许第三方实现？这里有一个小例子来证明我的想法。原始状态: 答:0-1-2-3 | | | | 乙:0-1-2-3 删除 B 中的元素 1 后: 空值 | 答:
java - 双向 OneToOne 被多次加载
我有两个实体通过这样的双向 OneToOne 关联连接: @Entity class Parent { @NotNull String businessKey; @OneToO
vagrant - 双向 Vagrant Rsync
我已将 Vagrant 配置为使用 Rsync 共享文件夹而不是(非常慢)vboxsf VirtualBox 默认提供的文件系统: Vagrant.configure("2") do |config|
html - 双向 CSS 高度动画
@keyframes mgm { from { max-height: 250px; } to { max-height: 0px; } } .mgm {
python - 双向 LSTM 合并模式说明
我想了解有关使用双向 LSTM 进行序列分类时合并模式的更多详细信息，尤其是对于我还不清楚的“Concat”合并模式。根据我对这个方案的理解: 在将前向和后向层的合并结果传递到 sigmoid 函数
git - 双向 git 镜像
我有兴趣将本地 git 存储库设置为远程存储库的镜像。我已经阅读了一些可能相关的帖子，但主要区别在于我需要对两个存储库进行读写访问。大多数时候，用户会针对 Repo A 工作，但是有时他们会针对 R
javascript - 查询和改变Firebase实时数据库多对多(双向)关系
我已经仔细阅读了文档 https://firebase.google.com/docs/database/web/read-and-write以及网上很多例子。但这里有一个脱节:在将对象添加到数据库时
java - 双向 onetomany 不更新外键
这个问题已经有答案了: Hibernate bidirectional @ManyToOne, updating the not owning side not working (3 个回答) 已关闭
java - JPA OneToMany 双向
我知道有很多关于它的问题，但我找不到针对我的问题的好的答案。我使用 Jboss 作为 7，Spring 和 Hibernate (4) 作为 JPA 2.0 提供程序，因此我有简单的 @OneToM

首页

博学

6Ren·AI

商城

javascript - 作用域之间的双向数据绑定(bind)

HTML

isColorPicker.js

更新

HTML

isColorPicker.js