angularjs指令-赋值

最新推荐文章于 2021-06-01 12:15:56 发布

原创最新推荐文章于 2021-06-01 12:15:56 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angularjs

angularjs 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一个AngularJS指令的实现案例，展示了如何通过自定义指令来扩展HTML元素的功能，包括使用双向数据绑定和调用控制器中的函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>