Angular 学习笔记——自定义标签

最新推荐文章于 2019-06-26 22:54:16 发布

weixin_34380781

最新推荐文章于 2019-06-26 22:54:16 发布

阅读量212

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/mayufo/p/5008957.html

版权

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 div,#div2 div{ width:200px; height:200px; border:1px red solid; display:none;}
#div1 input.active , #div2 input.active{ background:red;}
</style>
<script src="angular.min.js"></script>
<script>

var m1 = angular.module('myApp',[]);
m1.directive('myTab',function(){
    return {
        restrict : 'E',   
        replace : true,
        //scope : true,
        scope : {
            myId : '@',
            myName : '=',
            myFn : '&'
        },
        controller : ['$scope',function($scope){
            $scope.name = 'miaov';
        }],
        templateUrl : 'temp2.html'
    };
});

m1.controller('Aaa',['$scope',function($scope){
    
    $scope.name = 'hello';
    $scope.show = function(n){
        alert(n);
    };
    
}]);


</script>
</head>

<body ng-controller="Aaa">
<my-tab my-id="div1" my-name="name" my-fn="show(num)"></my-tab>
<my-tab my-id="div2" my-name="name" my-fn="show(num)"></my-tab>
</body>
</html>

temp2.html

<div id="{{myId}}">
    <input class="active" type="button" value="1" ng-click="myFn({num:456})">
    <input type="button" value="2">
    <input type="button" value="3">
    <div style="display:block">{{name}}</div>
    <div>22222222</div>
    <div>33333333</div>
</div>

转载于:https://www.cnblogs.com/mayufo/p/5008957.html

weixin_34380781

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Angular 学习笔记——自定义标签

<!DOCTYPE HTML><html ng-app="myApp"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>#div1 di...
复制链接

扫一扫