AngularJS指令更改输入框的颜色

Question

I am using angularjs and am pretty new, I need a directive that depending upon a condition it will change the background color of the input box that has the directive attribute. How do I refeence the calling element to change it's background.

Answer 1

You can do it with ng-style , anyway, if you really need it wrapped in a directive I've made it for you in Plunkr

It'll update as soon as the input changes.

What I'm doing there is watching the color changing and set it to an ng-style within the directive and transcluding it.

Answer 2

Here is a working example of how it would look like using the ng-class: View Demo

<div ng-app>
<form>
    <input type="text" ng-class="{ error: faulty }"  size="30"/>
    <input type="checkbox" ng-model="faulty"/> check me
</form>

.error { 
    background-color:red; 
    border:2px solid blue; 
}

Answer 3

Please find the below plunk for the example.

I created directive inputBox to do this

<input-Box is-maximized="isMaximized" />

The directive is

<input type="input" ng-class="{mini: (isMaximized == 1), box: (isMaximized == 0)}" />

Used ng-class and changed the color based on the condition. if isMaximized is set to 1 in the parent controller it will apply mini class and if it is set to 0 it will apply box class.

http://plnkr.co/edit/ELi3XHk5xWaKMP4MCL2F?p=preview