如何通過函數執行指令並檢索它創建的樣式

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> 

這傳遞新聯繫人列表中的控制器的部分。更可以通過訪問plunkr

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

可以看到你可以

Answer 1

鏈接與replace: false範圍，控制器和指令現在使用相同的範圍內看到預先在該PLUNKR

感謝代碼對象，控制器或指令將同步。 如需聯繫範圍，請在contact.name屬性上添加$watch。 當有變化的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-風格span元素來從物體的顏色，而不是

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

讓我們知道