angularjs 使用指令更改 css 样式

Question

我正在尝试使用 angular 操作 DOM css 样式，假设我想将文本框值设置为 height 。我将ng-model 分配给文本框，然后分配ng-style="{height:heightdef}"

如何使用指令来实现这一点？

小提琴 :: 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";

    }); 

Answer 1

如果我正确理解您的问题，此链接可能会帮助您获得答案。这是link，我和你一样一直在寻找。
简短回答：

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

Answer 2

所以这是更新后的答案：

你应该根据角度创建指令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'
  };   
});

所以你可以像这样使用它<my-box options='options'></my-box>

通过单击按钮更改选项：

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

标记

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

这里是快速example