学习笔记-AngularJs（十）(2)_H5之家 - 中国HTML5教程资源分享第一站

在这里，我们另外写一个比较综合的例子，dialog.html可到github下载（github地址： https://github.com/xiaobin5201314/AngularJS-Learning/tree/master/block-example/指令-13 ）

<!doctype html>
<html ng-app='directiveModule'>
<head>
<meta charset="utf8"/>
<script src="../jquery.js"></script>
<script src="../angular.js"></script>
<script src="../bootstrap.min.js"></script>
<link href="../bootstrap.min.css">
<script>
var directive = angular.module('directiveModule', []);
//这里是验证指令的内部可以访问外部指令的作用域，这样我们在dialog.html也可以查看到遍历出来的的arrs
directive.controller("directiveControl",["$scope",function($scope){
$scope.arrs=["我是内容一","我是内容二","我是内容三"];
$scope.hide=false;
}])
//将任意可以被注入的ng服务注入到控制器中，便可以在指令中使用它了。控制器中也有一些特殊的服务可以被注入到指令当中,当然这是在应用上声明、也可以直接写在controller属性上
directive.controller("directiveChildControl",['$scope','$attrs','$element','$transclude',function($scope,$attrs,$element,$transclude){
$element.css('border', '#fff'); //改变模板dom里面的结构
$transclude(function (clone) { //这是操作嵌入的作用域里面的dom
var a = angular.element('<a>');
a.attr('href', 'http://www.cnblogs.com/wuxiaobin');
a.text('我的博客原地址');
$element.find('.modal-body').append(a);
});
}])
directive.directive("dialog", function () {
return {
restrict: "AE",
replace: true,
transclude:true, //配合ng-transclude使用，为true时，可以将原元素的内容（html、其他指令）提取到带有指令ngTransclude的元素内
controller:'directiveChildControl',
scope:{
title:"@" //模板也可以访问外部的作用域对象,dialog.html的{{title}}正是局部作用域访问父作用域的所产生的效果，这样可以很好实现我们的组件的设计思想，但对于@、=、&的写法有些不理解，望有更好的学习资料可以提供一下，当然搞懂了，也会更新上来
},
templateUrl: 'dialog.html',
link: function(scope, element, attrs, ctrl) {
console.log(element.html());
element.find('.modal-title').css('color', 'red');
}
}
});
</script>
</head>
<body ng-controller="directiveControl">
<button data-toggle="modal" data-target="#myModal">弹出模态框</button>
<dialog title="我是传递过来的title">
<span ng-repeat="arr in arrs" ng-hide="hide">
{{$index}}-{{arr}} <br>
</span>
我的内容即将保存，被提取到<code> span[ng-transclude] </code>上
</dialog>
</body>
</html>

效果图：

学习笔记-AngularJs（十）

本文前端（javascript）相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计精通javascript javascript教程

分页：12

转载请注明
本文标题：学习笔记-AngularJs（十）
本站链接：

1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责；
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性，不作出任何保证或承若；
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。

登录后可拥有收藏文章、关注作者等权限...

注册登录