前端之家收集整理的这篇文章主要介绍了
angularjs指令-赋值,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>angularjs指令</title>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<script src="jquery-2.1.3.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="angular.min.js"></script>
</head>
<!-- directive调用参数时,需要在scope里面指定,比如template要调用controller里面的name,
则需要先在渲染的span里面定义一个qw-color标签,directive的scope里面定义color取qw-color的name
调用函数时用的是'&',调用参数是用的是'='-->
<body ng-app="kongwc" ng-controller="myCtrl">
<div class="container-fluid" style="margin:10px 10px;">
<div class="row">
<input type="text" ng-model="name" class="col-md-2"/>
<span qingwei qw-color="name" class="col-md-4" qw-fun="getColor()"></span>
</div>
</div>
</body>
<script>
var app = angular.module('kongwc',[]);
app.directive('qingwei',function () {
return {
restrict : 'AE',template : '{{color}}<span style="color:{{color}}"><b>小白牛</b></span><a href="#" ng-click="fun()" class="active">当前颜色</a>',scope : {color : '=qwColor',fun : '&qwFun'}
}
});
app.controller('myCtrl',function ($scope) {
$scope.name = 'green';
$scope.getColor = function () {
alert($scope.name);
}
});
</script>
</html>
原文链接:https://www.f2er.com/angularjs/146978.html