angularjs 使用指令更改 css 样式
Posted
技术标签:
【中文标题】angularjs 使用指令更改 css 样式【英文标题】：angularjs to change css style using directive 【发布时间】：2014-06-02 16:14:35 【问题描述】：我正在尝试使用 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";
);
【问题讨论】：
您希望在指令中放置什么 - 仅主框或所有 html？ 检查我的更新答案:) 【参考方案1】：如果我正确理解您的问题，此链接可能会帮助您获得答案。这是link，我和你一样一直在寻找。 简短回答：
<div ng-style=" 'height' : heightdef "></div>
【讨论】：
【参考方案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
【讨论】：
@Array 我如何使用指令实现相同的功能？ 我需要编写代码 onclick 事件，目前一切都在 ng-change 事件发生变化？ 对不起，我误解了这个问题。所以你想像这样<my-box box-height='heightdef' ... >/<my-box> 为你设置高度？以上是关于angularjs 使用指令更改 css 样式的主要内容，如果未能解决你的问题，请参考以下文章