angular.js 指令（directive）的简单使用

为了属性angular的指令编写方式，编写了一个简单的checkbox控件

实现效果如下

widget.js:

(function(){
    app.directive('test', function() {
        return {
            restrict: 'E',
            templateUrl:"tpl.html",
            replace: true,
            scope:{
                isChecked:"="
            },
            link :function($scope,$element,attrs){
                $scope.switch=function(){
                    $scope.isChecked=!$scope.isChecked
                }
            }
        };
    });
})();

tpl.html:

<div ng-click="switch()" style=" box-sizing: border-box; overflow: hidden; width: 80px;height: 30px;background:#fff; border:1px solid  {{isChecked?'#22DD48':'#ccc'}}  ;  border-radius: 10px;">
    <div style=" float: left; width: 50%;height: 100%;background: {{isChecked?'#fff':'#ccc'}} ;">
    </div>
    <div style="float: right; width: 50%;height: 100%;background: {{isChecked?'#22DD48':'#fff'}} ;">
    </div>
</div>

Test.html:

<!DOCTYPE html>
<html>
<head lang="en">
    <script src="angular.min.js"></script>

    <meta charset="UTF-8">
    <title></title>
</head>
<body ng-app="test-app">
<div ng-Controller="test">
    <test is-Checked="checked1"></test>
    <div>{{checked1?"你选中了":"你没选中"}}</div>

    <test is-Checked="checked2"></test>
    <div>{{checked2?"你选中了":"你没选中"}}</div>

    <test is-Checked="checked3"></test>
    <div>{{checked3?"你选中了":"你没选中"}}</div>
</div>

<script>
    var app=angular.module('test-app', []);
    app.controller("test",function($scope){
        $scope.name="test";
        $scope.checked=true;

    })
</script>
<script src="widget.js"></script>
</body>
</html>

angular.js 指令（directive）的简单使用

相关内容

访问排行