Question

我有一个随机选择颜色的指令，并将其作为头像分配给新用户。通过添加style="background-color: #RGBFunction"，随机工作和指令可以正常工作。我需要进一步扩展这个功能，但我似乎无法弄明白。

首先，正如您在代码中看到的那样，只要元素通过DOM，该指令就会激活。但是，当用户开始在输入字段中输入名称时，我宁愿启动该指令。

其次，执行addNewContact()函数后，颜色不会传递给联系人列表。我想以某种方式吸收style="background-color: #RGBFunction"并将其传递到color contacts.json中的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; } }; }字段吗？

这是指令

    <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>

HTML

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

Controller将新联系人传递给列表的部分。访问plunkr

可以看到更多

{{1}}

您可以在此PLUNKR

中查看代码

提前致谢

Answer 1

将范围与replace: false链接，控制器和指令现在使用相同的范围对象，控制器或指令将同步。在可访问范围的情况下，在$watch属性上添加contact.name。 name更新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>

告诉我们

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

1 个答案: