综合技术

Angularjs to change the css style using the directive

微信扫一扫,分享到朋友圈

Angularjs to change the css style using the directive
0

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

    });

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

阅读原文...


Hello, buddy!

小度智能音箱1S发布:可红外控制传统家电

上一篇

The billionaire CEO of Apple supplier Foxconn says he 'will follow the instruction' of a se...

下一篇

您也可能喜欢

评论已经被关闭。

插入图片
Angularjs to change the css style using the directive

长按储存图像,分享给朋友