angularjs to change css style using directive

Question

I am trying to Manipulate DOM css style using angular , suppose text box value i want to set as height . i assigned ng-model to text box and then ng-style="{height:heightdef}"

How can i acieve this using Directive??

Fiddle :: http://jsfiddle.net/simmi_simmi987/U5KCg/

<div ng-app="myApp" ng-controller="MyCtrl">
    <div class="container">
    <div class="row">


    <h1>Hello, world! {{hello}}</h1>
    <input type="text" />

    <div ng-style="{backgroundColor:bgcolordef}">I'm a banner! + {{bgcolordef}}</div>

          <div ng-style="{height:heightdef,width:widthdef,backgroundColor:bgcolordef}" class="col-md-10 col-md-offset-1" id="largebox">
            <br/>
            I am main Box

          <a href={{link1}}><div class="smallbox pull-right col-md-2" id="box1" >{{box1label}}</div></a>
          <a href={{link2}}><div class="smallbox pull-right col-md-2" id="box3" >{{box3label}}</div></a>
          <a href={{link3}}><div class="smallbox pull-right col-md-2" id="box4" >{{box4label}}</div></a>
        <!--   <div class="smallbox pull-right col-md-1" id="box5" >box5</div>
          <div class="smallbox pull-right col-md-1" id="box6" >box6</div> -->


          </div>
    </div><!-- row closed  -->
    <br/><br/><br/><br/>
    <div class="row">
        <div class="form col-md-5 category">


           <!-- Height input-->
            <div class="form-group">
              <label class="col-md-3 control-label" for="name">Height</label>
              <div class="col-md-9">
                <input ng-model="heightdef" id="name" name="name" type="text" placeholder="Your name" class="form-control">
              </div>
            </div>

            <br/>

           <!-- Width input-->
            <div class="form-group">
              <label class="col-md-3 control-label" for="name">Width</label>
              <div class="col-md-9">
                <input ng-model="widthdef" id="name" name="name" type="text" placeholder="Your name" class="form-control">
              </div>
            </div>

            <br/>

           <!-- BAckground-color input-->
            <div class="form-group">
              <label class="col-md-3 control-label" for="name">BgColor</label>
              <div class="col-md-9">
                <input ng-model="bgcolordef" id="name" name="name" type="text" placeholder="Your name" class="form-control">
              </div>
            </div>
            <br/>
            <button class="btn btn-primary btn-default pull-right" > Set </button>
        </div>


        <div class="form col-md-5 col-md-offset-1 category">

            <div class="form-group indiv-box">
              <h3>Box 1:</h3>
              <label class="col-md-3 control-label" for="name">URL</label>
              <div class="col-md-9">
                <input ng-model="link1" id="name" name="name" type="text" placeholder="Your name" class="form-control">
              </div>

              <label class="col-md-3 control-label" for="name">Lablel</label>
              <div class="col-md-9">
                <input ng-model="box1label" id="name" name="name" type="text" placeholder="Your name" class="form-control">
              </div>
               <button class="btn btn-primary btn-default pull-right" > Set </button>
            </div>

            <br/><br/><br/>
            <div class="form-group indiv-box">
              <h3>Box 2:</h3>
              <label class="col-md-3 control-label" for="name">URL</label>
              <div class="col-md-9">
                <input ng-model="link2" id="name" name="name" type="text" placeholder="Your name" class="form-control">
              </div>

              <label class="col-md-3 control-label" for="name">Lablel</label>
              <div class="col-md-9">
                <input ng-model="box2label" id="name" name="name" type="text" placeholder="Your name" class="form-control">
              </div>
               <button class="btn btn-primary btn-default pull-right" > Set </button>
            </div>


            <br/><br/><br/>
            <div class="form-group indiv-box">
              <h3>Box 3:</h3>
              <label class="col-md-3 control-label" for="name">URL</label>
              <div class="col-md-9">
                <input ng-model="link3" id="name" name="name" type="text" placeholder="Your name" class="form-control">
              </div>

              <label class="col-md-3 control-label" for="name">Lablel</label>
              <div class="col-md-9">
                <input ng-model="box3label" id="name" name="name" type="text" placeholder="Your name" class="form-control">
              </div>
               <button class="btn btn-primary btn-default pull-right" > Set </button>
            </div>



            <br/><br/><br/>
            <div class="form-group indiv-box">
              <h3>Box 4:</h3>
              <label class="col-md-3 control-label" for="name">URL</label>
              <div class="col-md-9">
                <input ng-model="link4" id="name" name="name" type="text" placeholder="Your name" class="form-control">
              </div>

              <label class="col-md-3 control-label" for="name">Lablel</label>
              <div class="col-md-9">
                <input ng-model="box4label"  id="name" name="name" type="text" placeholder="Your name" class="form-control">
              </div>
               <button class="btn btn-primary btn-default pull-right" > Set </button>
            </div>


        </div>
      </div><!-- row closed -->
    <div> <!-- Container closed  -->

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

    <script type="text/javascript" src="js/ng-grid-2.0.7.min.js"></script>
  </div>

Javascript ::

var app = angular.module('myApp', []);
app.controller('MyCtrl', function($scope, $http) {
    $scope.hello="My dear very good morning";
    $scope.heightdef=100;
    $scope.widthdef=1000;
    $scope.box1label="box1";
    $scope.box2label="box2";
    $scope.box3label="box3";
    $scope.box4label="box4";
    $scope.link1="box1.html";
    $scope.link2="box2.html";
    $scope.link3="box3.html";
    $scope.link4="box4.html";

    });

what exacly ho you want into place in the directive - only main box or all your html? — Aray Karjauv
– Aray Karjauv, Commented Apr 18, 2014 at 7:58

Community · Accepted Answer · 2017-05-23 11:50:56Z

1

If I understand your question correctly, this link may be help you to get your answer. This is the link which I was looking for like you.
for short answer:

<div ng-style="{ 'height' : heightdef }"></div>

edited May 23, 2017 at 11:50

CommunityBot

11 silver badge

answered Dec 9, 2014 at 14:11

Ali Fattahian

4951 gold badge7 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Aray Karjauv · Accepted Answer · 2014-04-18 08:26:04Z

0

So here is the updated answer:

You should create derective according angular Directive Documentation

app.directive('myBox', function(){
function link(scope, el, attrs) {
}

return {
  scope:{
      options: '='
  },
restrict: 'E',
link: link,
  // here you can use inline template: "<div>..." or templateUrl: 'url to your partial'
  };   
});

so you can use it like this <my-box options='options'></my-box>

to change options by clicking button:

    $scope.setMainBox = function(){
    var options = {
        heightdef: $scope.heightdef,
        widthdef: $scope.widthdef,
        bgcolordef: $scope.bgcolordef
    };
    $scope.options = options;
};

markup

<button ng-click="setMainBox()" class="btn btn-primary btn-default pull-right" > Set main box </button>

here is quick example

edited Apr 18, 2014 at 8:26

answered Apr 18, 2014 at 7:34

Aray Karjauv

2,9552 gold badges31 silver badges46 bronze badges

3 Comments

anam Over a year ago

@Array how can i achieve the same using directives?

anam Over a year ago

i need to write code onclick event , currently everything is changed on ng-change event ?

Aray Karjauv Over a year ago

sorry, I misunderstood the question. So you want to set height for you derective like this <my-box box-height='heightdef' ... >/<my-box> ?

Collectives™ on Stack Overflow

angularjs to change css style using directive

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related