javascript - 如何通过函数执行指令并检索它创建的样式

Question

我有一个指令，可以随机选择一种颜色并将其分配给新用户作为头像。通过添加 style="background-color: #RGBFunction"，随机性有效，指令也按照我的预期工作。我需要进一步扩展此功能，但我似乎无法弄清楚。

首先，正如您在代码中看到的，一旦元素通过 DOM，指令就会启动。但我更希望当用户开始在输入字段中输入名称时启动该指令。

其次，一旦执行 addNewContact() 函数，颜色就不会传递到联系人列表。我想以某种方式吸收 style="background-color: #RGBFunction" 并将其传递到我的 contacts.json 中的 color 字段这可能吗？

这是指令

 function randomBackgroundcolor() {
        return {
        restrict: 'EAC',
        replace: false,
        link: function (scope, element, attr) {

            //generate random color
            var color = '#' + (Math.random() * 0xFFFFFF << 0).toString(16);

            //Add random background class to selected element
            element.css('background-color', color);
            //document.getElementById('newContact').style.backgroundColor = color;

        }
    };
 }

HTML

    <md-dialog-content>
        <div class="md-dialog-content">
            <div class="mb-30 avatar-wrapper" layout="column" layout-align="center center">
                <span class="md-fab md-initials md-large mb-15" random-backgroundcolor>
                    {{contact.name | shortName}}{{contact.lastName | shortName}}
                </span>
            </div>
        </div>  
        <div class="" layout="column" layout-align="center center">
            <md-input-container class="md-icon-float" flex="100">
                <label>Name (required)</label>
                <input ng-model="contact.name" type="text" ng-required md-autofocus>
            </md-input-container>
            <md-input-container class="md-icon-float" flex="100">
                <label>Last Name (required)</label>
                <input ng-model="contact.lastName" type="text" ng-required md-autofocus>
            </md-input-container>
        </div>
    </md-dialog-content>

以及将新联系人传递到列表的 Controller 部分。更多内容可以访问plunkr查看

function addNewContact()
{
        Contacts.unshift($scope.contact);
        closeDialog();
}

你可以在这个PLUNKR中看到代码

提前致谢

Answer 1

使用replace: false链接作用域， Controller 和指令现在使用相同的作用域对象， Controller 或指令将同步。使用可用范围，在 contact.name 属性上添加 $watch。当名称发生更改时，更新contact.color

function randomBackgroundcolor() {
  return {
    restrict: 'EAC',
    replace: false,
    scope: false,
    link: function(scope, element, attr) {
      var color = '#' + (Math.random() * 0xFFFFFF << 0).toString(16);
      scope.$watch('contact.name', function(val) { 
        if (val !== '') { 
          scope.contact.color = color;
        }
      });
    }
  };
}

html:使用 ng-style 更新 span 元素以从对象中获取颜色

<span class="md-fab md-initials md-large mb-15" ng-style='{"background-color":contact.color}' random-backgroundcolor>

让我们知道